Add NavigationIconContent to FluentNavMenu (Fixes #463)

src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor

@@ -12,7 +12,12 @@
                               Class="navmenu-main-button"
                               @onclick="CollapsibleClickAsync"
                               title="@Title">
-                        <FluentIcon Name="@(FluentIcons.Navigation)" Size="IconSize.Size20" />
+                        @if (NavigationIconContent is not null) {
+                            @NavigationIconContent
+                        }
+                        else {
+                            <FluentIcon Name="@(FluentIcons.Navigation)" Size="IconSize.Size20" />
+                        }
                     </FluentButton>
                 }
                 @ChildContent

src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.cs

@@ -34,6 +34,14 @@ public partial class FluentNavMenu : FluentComponentBase
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Gets or sets the content to be rendered for the navigation icon
+    /// when the menu is collapsible.  The default icon will be used if
+    /// this is not specified.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? NavigationIconContent { get; set; }
+
     /// <summary>
     /// Gets or sets the title of the navigation menu
     /// Default to "Navigation menu"
@@ -78,7 +86,7 @@ public FluentNavMenu()
 
     internal bool HasSubMenu => _groups.Any();
 
-    internal bool HasIcons => _links.Any(i => !string.IsNullOrWhiteSpace(i.Icon));
+    internal bool HasIcons => _links.Any(i => i.HasIcon);
 
     internal async Task CollapsibleClickAsync()
     {

src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor

@@ -8,11 +8,27 @@
                 Selected="@Selected"
                 Expanded="@(NavMenuExpanded ? Expanded : false)"
                 Text="@(NavMenuExpanded ? Text : string.Empty)">
-    @if (!NavMenuExpanded) {
-        <FluentIcon Name="@IconNavMenuCollapsed" Size="@IconSize.Size20" Slot="start" OnClick="ExpandMenu" />
+    @if (NavMenuExpanded && HasExpandedIcon)
+    {
+        if (ExpandedIconContent is not null)
+        {
+            <div slot="start" @onclick="HandleIconClick">@ExpandedIconContent</div>
+        }
+        else
+        {
+            <FluentIcon Name="@Icon" Size="@IconSize.Size20" Slot="start" OnClick="HandleIconClick" />
+        }
     }
-    @if (HasIcon) {
-        <FluentIcon Name="@Icon" Size="@IconSize.Size20" Slot="start" OnClick="HandleIconClick" />
+    @if(!NavMenuExpanded && HasCollapsedIcon)
+    {
+        if (CollapsedIconContent is not null)
+        {
+            <div slot="start" @onclick="ExpandMenu">@CollapsedIconContent</div>
+        }
+        else
+        {
+            <FluentIcon Name="@IconNavMenuCollapsed" Size="@IconSize.Size20" Slot="start" OnClick="ExpandMenu" />
+        }
     }
     @if (NavMenuExpanded) {
         @ChildContent

src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuGroup.razor.cs

@@ -18,6 +18,20 @@ public partial class FluentNavMenuGroup : FluentComponentBase
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Gets or sets the content to be rendered for the icon when
+    /// the menu is collapsed.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? CollapsedIconContent { get; set; }
+
+    /// <summary>
+    /// Gets or sets the content to be rendered for the icon when
+    /// the menu is expanded.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ExpandedIconContent { get; set; }
+
     /// <summary>
     /// Gets or sets the destination of the link.
     /// </summary>
@@ -94,7 +108,8 @@ public FluentNavMenuGroup()
         .AddStyle(Style)
         .Build();
 
-    private bool HasIcon => !string.IsNullOrWhiteSpace(Icon);
+    private bool HasCollapsedIcon => !string.IsNullOrWhiteSpace(Icon) || CollapsedIconContent is not null;
+    private bool HasExpandedIcon => !string.IsNullOrWhiteSpace(Icon) || ExpandedIconContent is not null;
 
     protected override void OnParametersSet()
     {

src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuLink.razor

@@ -9,7 +9,12 @@
                 Text="@(NavMenuExpanded ? Text : string.Empty)">
     @if (HasIcon)
     {
-        <FluentIcon Name="@Icon" Size="@IconSize.Size20" Slot="start" OnClick="HandleIconClick"/>
+        if (IconContent is not null) {
+            <div slot="start">@IconContent</div>
+        }
+        else {
+            <FluentIcon Name="@Icon" Size="@IconSize.Size20" Slot="start" OnClick="HandleIconClick"/>
+        }
     } 
     @if (!HasIcon && NavMenu.HasIcons)
     {

src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenuLink.razor.cs

@@ -15,6 +15,12 @@ public partial class FluentNavMenuLink : FluentComponentBase
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Gets or sets the content to be rendered for the icon.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? IconContent { get; set; }
+
     /// <summary>
     /// Gets or sets the destination of the link.
     /// </summary>
@@ -83,7 +89,7 @@ public partial class FluentNavMenuLink : FluentComponentBase
         .AddStyle(Style)
         .Build();
 
-    private bool HasIcon => !string.IsNullOrWhiteSpace(Icon);
+    internal bool HasIcon => !string.IsNullOrWhiteSpace(Icon) || IconContent is not null;
 
     [CascadingParameter(Name = "NavMenuExpanded")]
     private bool NavMenuExpanded { get; set; }