Modified the RadzenSplitButton to allow customizing its dropdown icon. (#1530)

* Modified the RadzenSplitButton to allow customizing its dropdown icon.

* Changed the text in demo page.

Author: Kasunjalitha

Radzen.Blazor/RadzenSplitButton.razor

@@ -40,8 +40,9 @@
                     }
                 }
             }
-        </button><button tabindex="-1" disabled="@IsDisabled" onclick="@OpenPopupScript()" class="@getPopupButtonCss()" type="button" aria-label="@OpenAriaLabel">
-            <span aria-hidden="true" class="rz-button-icon-left rzi rzi-chevron-down"></span><span class="rz-button-text"></span>
+        </button>
+        <button tabindex="-1" disabled="@IsDisabled" onclick="@OpenPopupScript()" class="@getPopupButtonCss()" type="button" aria-label="@OpenAriaLabel">
+            <RadzenIcon Icon="@DropDownIcon" />
         </button>
         <div id="@PopupID" class="rz-splitbutton-menu">
             <ul class="rz-menu-list">

Radzen.Blazor/RadzenSplitButton.razor.cs

@@ -139,6 +139,12 @@ private string getButtonSize()
         [Parameter]
         public string OpenAriaLabel { get; set; } = "Open";
 
+        /// <summary>
+        /// Gets or sets the icon of the drop down.
+        /// </summary>
+        [Parameter]
+        public string DropDownIcon { get; set; } = "arrow_drop_down";
+
         /// <summary>
         /// Gets or sets the click callback.
         /// </summary>

RadzenBlazorDemos/Pages/SplitButtonDropDownIcon.razor

@@ -0,0 +1,42 @@
+@inject NotificationService NotificationService
+<div class="container-fluid splitbutton-demo">
+    <div class="row mb-4">
+        <div class="col">
+            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">DropDown Icon</RadzenText>
+            <RadzenSplitButton Click=@(args => OnClick(args, "Opened SplitButton")) Text="SplitButton" DropDownIcon="keyboard_double_arrow_down">
+                <ChildContent>
+                    <RadzenSplitButtonItem Text="Item1" Value="1" />
+                    <RadzenSplitButtonItem Text="Item2" Value="2" />
+                </ChildContent>
+            </RadzenSplitButton>
+            
+            <RadzenSplitButton Click=@(args => OnClick(args, "Opened SplitButton")) Text="SplitButton" DropDownIcon="expand_circle_down">
+                <ChildContent>
+                    <RadzenSplitButtonItem Text="Item1" Value="1" />
+                    <RadzenSplitButtonItem Text="Item2" Value="2" />
+                </ChildContent>
+            </RadzenSplitButton>
+            
+            <RadzenSplitButton Click=@(args => OnClick(args, "Opened SplitButton")) Text="SplitButton" DropDownIcon="keyboard_arrow_down">
+                <ChildContent>
+                    <RadzenSplitButtonItem Text="Item1" Value="1" />
+                    <RadzenSplitButtonItem Text="Item2" Value="2" />
+                </ChildContent>
+            </RadzenSplitButton>
+        </div>
+    </div>
+</div>
+
+@code {
+    void OnClick(RadzenSplitButtonItem item, string buttonName)
+    {
+        if (item != null)
+        {
+            NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "SplitButton Item Clicked", Detail = $"{buttonName}, item with value {item.Value} clicked" });
+        }
+        else
+        {
+            NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "SplitButton Clicked", Detail = $"{buttonName} clicked" });
+        }
+    }
+}

RadzenBlazorDemos/Pages/SplitButtonPage.razor

@@ -95,6 +95,16 @@
     <SplitButtonAlwaysOpenPopup />
 </RadzenExample>
 
+<RadzenText Anchor="splitbutton#customize-dropdown-icon"  TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    DropDown icon of SplitButton
+</RadzenText>
+<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
+    Customize the dropdown icon of SplitButton. Use <code>DropDownIcon</code> parameter to set the icon.
+</RadzenText>
+<RadzenExample ComponentName="SplitButton" Example="CustomizeSplitButtonDropDownIcon">
+    <SplitButtonDropDownIcon />
+</RadzenExample>
+
 <RadzenText Anchor="splitbutton#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Keyboard Navigation
 </RadzenText>