Add new Icon parameter to BitDropdown (#12086)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor

@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitInputBase<TValue>
 @typeparam TItem
 @typeparam TValue
@@ -131,9 +131,10 @@
             }
             else
             {
+                var icon = BitIconInfo.From(CaretDownIcon, CaretDownIconName ?? "ChevronRight bit-ico-r90");
                 <i aria-hidden="true"
                    style="@Styles?.CaretDownIcon"
-                   class="bit-icon bit-icon--@(CaretDownIconName ?? "ChevronRight bit-ico-r90") @Classes?.CaretDownIcon" />
+                   class="@icon?.GetCssClasses() @Classes?.CaretDownIcon" />
             }
         </span>
 

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs

@@ -1,4 +1,4 @@
-using System.Text;
+using System.Text;
 using System.Linq.Expressions;
 using System.Diagnostics.CodeAnalysis;
 
@@ -52,7 +52,21 @@ namespace Bit.BlazorUI;
     [Parameter] public RenderFragment? CalloutFooterTemplate { get; set; }
 
     /// <summary>
-    /// The icon name of the chevron down element of the dropdown.
+    /// The icon of the chevron down element of the dropdown.
+    /// Takes precedence over <see cref="CaretDownIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="CaretDownIconName"/> instead.
+    /// </summary>
+    /// <example>
+    /// Bootstrap: CaretDownIcon="BitIconInfo.Bi("chevron-down")"
+    /// FontAwesome: CaretDownIcon="BitIconInfo.Fa("solid chevron-down")"
+    /// Custom CSS: CaretDownIcon="BitIconInfo.Css("my-chevron-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? CaretDownIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the chevron down element of the dropdown from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="CaretDownIcon"/> instead.
     /// </summary>
     [Parameter] public string? CaretDownIconName { get; set; }
 
@@ -737,6 +751,43 @@ internal BitDropdownItemType GetItemType(TItem item)
         return item.GetValueFromProperty<string?>(NameSelectors.Title.Name);
     }
 
+    internal BitIconInfo? GetIcon(TItem item)
+    {
+        if (item is BitDropdownItem<TValue> dropdownItem)
+        {
+            return BitIconInfo.From(dropdownItem.Icon, dropdownItem.IconName);
+        }
+
+        if (item is BitDropdownOption<TValue> dropdownOption)
+        {
+            return BitIconInfo.From(dropdownOption.Icon, dropdownOption.IconName);
+        }
+
+        if (NameSelectors is null) return null;
+
+        BitIconInfo? icon = null;
+        if (NameSelectors.Icon.Selector is not null)
+        {
+            icon = NameSelectors.Icon.Selector!(item);
+        }
+        else
+        {
+            icon = item.GetValueFromProperty<BitIconInfo?>(NameSelectors.Icon.Name);
+        }
+
+        string? iconName = null;
+        if (NameSelectors.IconName.Selector is not null)
+        {
+            iconName = NameSelectors.IconName.Selector!(item);
+        }
+        else
+        {
+            iconName = item.GetValueFromProperty<string?>(NameSelectors.IconName.Name);
+        }
+
+        return BitIconInfo.From(icon, iconName);
+    }
+
     internal TValue? GetValue(TItem? item)
     {
         if (item is null) return default;

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss

@@ -1,4 +1,4 @@
-@import "../../../Styles/functions.scss";
+@import "../../../Styles/functions.scss";
 @import "../../../Styles/media-queries.scss";
 
 .bit-drp {
@@ -661,12 +661,14 @@
 .bit-drp-itm {
     width: 100%;
     display: flex;
+    gap: spacing(1);
     cursor: pointer;
     overflow: hidden;
     font-weight: 400;
     text-align: start;
     user-select: none;
     position: relative;
+    color: $clr-fg-pri;
     white-space: nowrap;
     align-items: center;
     height: spacing(4.5);
@@ -678,7 +680,6 @@
     font-size: spacing(1.875);
     line-height: spacing(2.5);
     background-color: transparent;
-    color: $clr-fg-pri;
     border: $shp-border-width $shp-border-style transparent;
 
     @media (hover: hover) {

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public class BitDropdownClassStyles
 {
@@ -142,6 +142,11 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? ItemCheckIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the item icon of the BitDropdown.
+    /// </summary>
+    public string? ItemIcon { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the item text of the BitDropdown.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownItem.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public class BitDropdownItem<TValue>
 {
@@ -12,6 +12,20 @@ public class BitDropdownItem<TValue>
     /// </summary>
     public string? Class { get; set; }
 
+    /// <summary>
+    /// The icon to display using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </summary>
+    public BitIconInfo? Icon { get; set; }
+
+    /// <summary>
+    /// The icon name from the Fluent UI icon set to display for the dropdown item.
+    /// For external icon libraries, use <see cref="Icon"/> instead.
+    /// </summary>
+    public string? IconName { get; set; }
+
     /// <summary>
     /// The id for the dropdown item.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownNameSelectors.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public class BitDropdownNameSelectors<TItem, TValue>
 {
@@ -12,6 +12,16 @@ public class BitDropdownNameSelectors<TItem, TValue>
     /// </summary>
     public BitNameSelectorPair<TItem, string?> Class { get; set; } = new(nameof(BitDropdownItem<TValue>.Class));
 
+    /// <summary>
+    /// The Icon field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, BitIconInfo?> Icon { get; set; } = new(nameof(BitDropdownItem<TValue>.Icon));
+
+    /// <summary>
+    /// The IconName field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, string?> IconName { get; set; } = new(nameof(BitDropdownItem<TValue>.IconName));
+
     /// <summary>
     /// The Id field name and selector of the custom input class.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownOption.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitDropdownOption<TValue> : ComponentBase, IDisposable
 {
@@ -17,6 +17,20 @@ public partial class BitDropdownOption<TValue> : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public string? Class { get; set; }
 
+    /// <summary>
+    /// The icon to display using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? Icon { get; set; }
+
+    /// <summary>
+    /// The icon name from the Fluent UI icon set to display for the dropdown option.
+    /// For external icon libraries, use <see cref="Icon"/> instead.
+    /// </summary>
+    [Parameter] public string? IconName { get; set; }
+
     /// <summary>
     /// The id for the dropdown option.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor

@@ -53,6 +53,11 @@
                     }
                     else
                     {
+                        var itemIcon = Dropdown.GetIcon(Item);
+                        @if (itemIcon is not null)
+                        {
+                            <i style="@Dropdown.Styles?.ItemIcon" class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
+                        }
                         <span style="@Dropdown.Styles?.ItemText"
                               class="bit-drp-itx @Dropdown.Classes?.ItemText">
                             @text
@@ -83,6 +88,11 @@
                 }
                 else
                 {
+                    var itemIcon = Dropdown.GetIcon(Item);
+                    @if (itemIcon is not null)
+                    {
+                        <i style="@Dropdown.Styles?.ItemIcon" class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
+                    }
                     <span style="@Dropdown.Styles?.ItemText"
                           class="@Dropdown.Classes?.ItemText">
                         @text

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor

@@ -1,4 +1,4 @@
-@page "/components/dropdown"
+@page "/components/dropdown"
 @inherits AppComponentBase
 
 <PageOutlet Url="components/dropdown"
@@ -15,7 +15,8 @@
               PublicMembers="componentPublicMembers"
               GitHubUrl="Inputs/Dropdown/BitDropdown.razor"
               GitHubDemoUrl="Inputs/Dropdown/BitDropdownDemo.razor"
-              IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4">
+              >
+              @* IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4" *@
         <NotesTemplate>
             <BitText>
                 The BitDropdown is a <BitTag Color="BitColor.SecondaryBackground">Multi-API</BitTag> component