Add new Icon parameters to BitNav (#12107)

src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.internal.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitNav<TItem>
 {
@@ -217,6 +217,43 @@ internal bool GetForceAnchor(TItem item)
         return item.GetValueFromProperty(NameSelectors.ForceAnchor.Name, false);
     }
 
+    internal BitIconInfo? GetIcon(TItem item)
+    {
+        if (item is BitNavItem navItem)
+        {
+            return BitIconInfo.From(navItem.Icon, navItem.IconName);
+        }
+
+        if (item is BitNavOption navOption)
+        {
+            return BitIconInfo.From(navOption.Icon, navOption.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 string? GetIconName(TItem item)
     {
         if (item is BitNavItem navItem)

src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.parameters.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitNav<TItem>
 {
@@ -13,10 +13,18 @@ public partial class BitNav<TItem>
     /// </summary>
     [Parameter] public bool AllExpanded { get; set; }
 
+    /// <summary>
+    /// The icon for the chevron-down element of each nav item.
+    /// Takes precedence over <see cref="ChevronDownIconName"/> 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="ChevronDownIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? ChevronDownIcon { get; set; }
+
     /// <summary>
     /// The custom icon name of the chevron-down element of each nav item.
     /// </summary>
-    [Parameter] public string? ChevronDownIcon { get; set; }
+    [Parameter] public string? ChevronDownIconName { get; set; }
 
     /// <summary>
     /// Items to render as children.

src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavItem.cs

@@ -47,6 +47,19 @@ public class BitNavItem
     /// </summary>
     public bool ForceAnchor { get; set; }
 
+    /// <summary>
+    /// Icon to render next to the nav item.
+    /// 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>
+    /// <example>
+    /// Bootstrap: Icon=BitIconInfo.Bi("gear-fill")
+    /// FontAwesome: Icon=BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon=BitIconInfo.Css("my-icon-class")
+    /// </example>
+    public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// Name of an icon to render next to the nav item.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavNameSelectors.cs

@@ -47,6 +47,11 @@ public class BitNavNameSelectors<TItem>
     /// </summary>
     public BitNameSelectorPair<TItem, bool?> ForceAnchor { get; set; } = new(nameof(BitNavItem.ForceAnchor));
 
+    /// <summary>
+    /// The Icon field name and selector of the custom input class (see <see cref="BitNavItem.Icon"/>).
+    /// </summary>
+    public BitNameSelectorPair<TItem, BitIconInfo?> Icon { get; set; } = new(nameof(BitNavItem.Icon));
+
     /// <summary>
     /// The IconName field name and selector of the custom input class (see <see cref="BitNavItem.IconName"/>).
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs

@@ -61,6 +61,19 @@ public partial class BitNavOption : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public bool ForceAnchor { get; set; }
 
+    /// <summary>
+    /// Icon to render next to the nav option.
+    /// 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>
+    /// <example>
+    /// Bootstrap: Icon=BitIconInfo.Bi("gear-fill")
+    /// FontAwesome: Icon=BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon=BitIconInfo.Css("my-icon-class")
+    /// </example>
+    [Parameter] public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// Name of an icon to render next to the nav option.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor

@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @typeparam TItem
 
 <li role="listitem" style="@Nav.GetStyle(Item)" class="@Nav.GetClass(Item)">
@@ -13,7 +13,8 @@
         var text = Nav.GetText(Item);
         var childItems = Nav.GetChildItems(Item);
         var description = Nav.GetDescription(Item);
-        var iconName = Nav.GetIconName(Item);
+        var chevronIcon = BitIconInfo.From(Nav.ChevronDownIcon, Nav.ChevronDownIconName ?? $"ChevronRight {(isExpanded ? "bit-nav-exp" : "bit-ico-r90")}");
+        var icon = Nav.GetIcon(Item);
         var url = Nav.GetUrl(Item);
         var title = Nav.GetTitle(Item);
         var target = Nav.GetTarget(Item);
@@ -66,7 +67,7 @@
                             <div class="bit-nav-iit" style="@(Nav.ReversedChevron ? "flex-flow:row-reverse" : null)">
                                 @if (Nav.NoCollapse is false)
                                 {
-                                    <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon ?? "ChevronRight") @(Nav.ChevronDownIcon.HasValue() ? "" : (isExpanded ? "bit-nav-exp" : "bit-ico-r90"))" aria-hidden="true" />
+                                    <i class="@chevronIcon?.GetCssClasses()" aria-hidden="true" />
                                 }
                                 <span class="bit-nav-ghd">@text</span>
                             </div>
@@ -82,7 +83,7 @@
                         <div class="bit-nav-iit" style="@(Nav.ReversedChevron ? "flex-flow:row-reverse" : null)">
                             @if (Nav.NoCollapse is false)
                             {
-                                <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon ?? "ChevronRight") @(Nav.ChevronDownIcon.HasValue() ? "" : (isExpanded ? "bit-nav-exp" : "bit-ico-r90"))" aria-hidden="true" />
+                                <i class="@chevronIcon?.GetCssClasses()" aria-hidden="true" />
                             }
                             <span class="bit-nav-ghd">@text</span>
                         </div>
@@ -144,7 +145,7 @@
                                  class="bit-nav-cbt @Nav.Classes?.ToggleButton"
                                  aria-expanded="@(isExpanded ? "true" : "false")"
                                  aria-label="@(isExpanded ? colAriaLabel : expAriaLabel)">
-                                <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon ?? "ChevronRight") @(Nav.ChevronDownIcon.HasValue() ? "" : (isExpanded ? "bit-nav-exp" : "bit-ico-r90"))" aria-hidden="true" />
+                                <i class="@chevronIcon?.GetCssClasses()" aria-hidden="true" />
                             </div>
                         }
                         <div style="@GetItemStyles()"
@@ -159,9 +160,9 @@
                             }
                             else
                             {
-                                @if (iconName.HasValue())
+                                @if (icon is not null)
                                 {
-                                    <i style="@Nav.Styles?.ItemIcon" class="bit-nav-iic bit-icon bit-icon--@iconName @Nav.Classes?.ItemIcon" aria-hidden="true" />
+                                    <i style="@Nav.Styles?.ItemIcon" class="bit-nav-iic @icon.GetCssClasses() @Nav.Classes?.ItemIcon" aria-hidden="true" />
                                 }
                                 <span style="@Nav.Styles?.ItemText" class="bit-nav-itx @Nav.Classes?.ItemText">@text</span>
                             }

src/BlazorUI/Bit.BlazorUI/Extensions/ObjectExtensions.cs

@@ -1,4 +1,4 @@
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics.CodeAnalysis;
 using System.Globalization;
 
 namespace Bit.BlazorUI;
@@ -30,6 +30,18 @@ internal static class ObjectExtensions
             if (value is null) return defaultValue;
         }
 
+        if (value is T tValue)
+        {
+            return tValue;
+        }
+
+        var implicitOp = targetType.GetMethod("op_Implicit", [value.GetType()]);
+        if (implicitOp is not null)
+        {
+            var result = implicitOp.Invoke(null, [value]);
+            return result is null ? defaultValue : (T)result;
+        }
+
         return (T)Convert.ChangeType(value, targetType, CultureInfo.InvariantCulture);
     }
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor

@@ -1,4 +1,4 @@
-@page "/components/nav"
+@page "/components/nav"
 @inherits AppComponentBase
 
 <PageOutlet Url="components/nav"
@@ -8,7 +8,7 @@
 <div>
     <DemoPage Name="Nav"
               SecondaryNames="@(["Tree", "TreeView"])"
-              Description="A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be sued as a TreeView to show parent-child data in a tree."
+              Description="A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be used as a TreeView to show parent-child data in a tree."
               Parameters="componentParameters"
               PublicMembers="componentPublicMembers"
               SubClasses="componentSubClasses"

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Navs.Nav;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Navs.Nav;
 
 public partial class BitNavDemo
 {
@@ -23,9 +23,18 @@ public partial class BitNavDemo
         new()
         {
             Name = "ChevronDownIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon for the chevron-down element of each nav item. Takes precedence over ChevronDownIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "ChevronDownIconName",
             Type = "string?",
             DefaultValue = "null",
-            Description = "The custom icon name of the chevron-down element of the BitNav component.",
+            Description = "The custom icon name of the chevron-down element of each nav item.",
         },
         new()
         {
@@ -337,6 +346,15 @@ public partial class BitNavDemo
                    Description = "Forces an anchor element render instead of button.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to render next to the nav item. Takes precedence over IconName when both are set.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
@@ -512,6 +530,15 @@ public partial class BitNavDemo
                    Description = "Forces an anchor element render instead of button.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to render next to the nav option. Takes precedence over IconName when both are set.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
@@ -687,6 +714,15 @@ public partial class BitNavDemo
                    Description = "The ForceAnchor field name and selector of the custom input class."
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitNameSelectorPair<TItem, BitIconInfo?>",
+                   DefaultValue = "new(nameof(BitNavItem.Icon))",
+                   Description = "The Icon field name and selector of the custom input class.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "BitNameSelectorPair<TItem, string?>",
@@ -853,6 +889,35 @@ public partial class BitNavDemo
                    Description = "Custom CSS classes/styles for the separator of the BitNav."
                },
             ]
+        },
+        new()
+        {
+            Id = "bit-icon-info",
+            Title = "BitIconInfo",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Name",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the name of the icon."
+               },
+               new()
+               {
+                   Name = "BaseClass",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty."
+               },
+               new()
+               {
+                   Name = "Prefix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty."
+               },
+            ]
         }
     ];
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/CarMenu.cs

@@ -9,6 +9,6 @@ public class CarMenu
     public string? ExpandedAriaLabel { get; set; }
     public string? CollapsedAriaLabel { get; set; }
     public bool IsExpandedParent { get; set; }
-    public List<CarMenu> Links { get; set; } = [];
     public string? Comment { get; set; }
+    public List<CarMenu> Links { get; set; } = [];
 }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/FoodMenu.cs

@@ -3,8 +3,8 @@
 public class FoodMenu
 {
     public string Name { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? Image { get; set; }
     public bool IsExpanded { get; set; }
-    public List<FoodMenu> Childs { get; set; } = [];
     public string? Comment { get; set; }
+    public List<FoodMenu> Childs { get; set; } = [];
 }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/Section.cs

@@ -3,7 +3,7 @@
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }