Icon + Expanded icon

examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml

@@ -2743,31 +2743,40 @@
             Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.CollapsedIconContent">
-            <summary>
-            Gets or sets the content to be rendered for the icon when
-            the menu is collapsed.
-            </summary>
-        </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.ExpandedIconContent">
-            <summary>
-            Gets or sets the content to be rendered for the icon when
-            the menu is expanded.
-            </summary>
-        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Href">
             <summary>
             Gets or sets the destination of the link.
             </summary>
         </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Icon">
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.ExpandedIconContent">
             <summary>
-            Gets or sets the name of the icon to display with the link
+            Gets or sets the content to be rendered for the icon when
+            the menu is expanded. If not set, then <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.ExpandedIcon"/> will
+            take next priority, followed by <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.IconContent"/>
+            and then <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Icon"/>.
             </summary>
         </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.IconNavMenuCollapsed">
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.ExpandedIcon">
             <summary>
-            Icon displayed only when the <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenu.Expanded"/> is false.
+            Gets or sets the content to be rendered for the icon when
+            the menu is expanded. <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.ExpandedIconContent"/> will take
+            precedence over this setting. If not set, then <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.IconContent"/> will
+            take next priority, followed <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Icon"/>
+            and then <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Icon"/>.
+            </summary>
+        </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.IconContent">
+            <summary>
+            Gets or sets the content to be rendered for the icon when
+            the menu is collapsed. If not set, then <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Icon"/> will
+            take next priority.
+            </summary>
+        </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Icon">
+            <summary>
+            Gets or sets the content to be rendered for the icon when
+            the menu is collapsed. <see cref="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.IconContent"/> will take
+            precedence over this setting. If not set, no icon will be displayed
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentNavMenuGroup.Disabled">

examples/FluentUI.Demo.Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor

@@ -10,6 +10,10 @@
             <FluentNavMenuGroup Text="Item 3">
                 <FluentNavMenuLink Icon="@(FluentIcons.LeafOne)" Text="Item 3.1" />
                 <FluentNavMenuLink Icon="@(FluentIcons.LeafTwo)" Text="Item 3.2" />
+                <FluentNavMenuGroup Text="Item 3">
+                    <FluentNavMenuLink Icon="@(FluentIcons.LeafOne)" Text="Item 3.1" />
+                    <FluentNavMenuLink Icon="@(FluentIcons.LeafTwo)" Text="Item 3.2" />
+                </FluentNavMenuGroup>
             </FluentNavMenuGroup>
             <FluentNavMenuLink Class="level1" Icon="@(FluentIcons.CalendarAgenda)" Text="Item 4" Disabled="true" />
         </FluentNavMenu>

examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuCollapsible.razor.txt

@@ -10,6 +10,10 @@
             <FluentNavMenuGroup Text="Item 3">
                 <FluentNavMenuLink Icon="@(FluentIcons.LeafOne)" Text="Item 3.1" />
                 <FluentNavMenuLink Icon="@(FluentIcons.LeafTwo)" Text="Item 3.2" />
+                <FluentNavMenuGroup Text="Item 3">
+                    <FluentNavMenuLink Icon="@(FluentIcons.LeafOne)" Text="Item 3.1" />
+                    <FluentNavMenuLink Icon="@(FluentIcons.LeafTwo)" Text="Item 3.2" />
+                </FluentNavMenuGroup>
             </FluentNavMenuGroup>
             <FluentNavMenuLink Class="level1" Icon="@(FluentIcons.CalendarAgenda)" Text="Item 4" Disabled="true" />
         </FluentNavMenu>

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

@@ -86,7 +86,7 @@ public partial class FluentNavMenu : FluentComponentBase
 
     internal bool HasSubMenu => _groups.Any();
 
-    internal bool HasIcons => _links.Any(i => i.HasIcon);
+    internal bool HasIcons => _links.Any(i => i.HasIcon) || _groups.Any(g => g.HasIcon);
 
     internal async Task CollapsibleClickAsync()
     {

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

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

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

@@ -19,36 +19,45 @@ public partial class FluentNavMenuGroup : FluentComponentBase
     public RenderFragment? ChildContent { get; set; }
 
     /// <summary>
-    /// Gets or sets the content to be rendered for the icon when
-    /// the menu is collapsed.
+    /// Gets or sets the destination of the link.
     /// </summary>
     [Parameter]
-    public RenderFragment? CollapsedIconContent { get; set; }
+    public string? Href { get; set; } = string.Empty;
 
     /// <summary>
     /// Gets or sets the content to be rendered for the icon when
-    /// the menu is expanded.
+    /// the menu is expanded. If not set, then <see cref="ExpandedIcon"/> will
+    /// take next priority, followed by <see cref="FluentNavMenuGroup.IconContent"/>
+    /// and then <see cref="FluentNavMenuGroup.Icon"/>.
     /// </summary>
     [Parameter]
     public RenderFragment? ExpandedIconContent { get; set; }
 
     /// <summary>
-    /// Gets or sets the destination of the link.
+    /// Gets or sets the content to be rendered for the icon when
+    /// the menu is expanded. <see cref="FluentNavMenuGroup.ExpandedIconContent"/> will take
+    /// precedence over this setting. If not set, then <see cref="IconContent"/> will
+    /// take next priority, followed <see cref="FluentNavMenuGroup.Icon"/>
+    /// and then <see cref="FluentNavMenuGroup.Icon"/>.
     /// </summary>
     [Parameter]
-    public string? Href { get; set; } = string.Empty;
-    
-    /// <summary>
-    /// Gets or sets the name of the icon to display with the link
-    /// </summary>
-    [Parameter]
-    public string Icon { get; set; } = string.Empty;
+    public string ExpandedIcon { get; set; } = string.Empty;
 
     /// <summary>
-    /// Icon displayed only when the <see cref="FluentNavMenu.Expanded"/> is false.
+    /// Gets or sets the content to be rendered for the icon when
+    /// the menu is collapsed. If not set, then <see cref="Icon"/> will
+    /// take next priority.
     /// </summary>
     [Parameter]
-    public string IconNavMenuCollapsed { get; set; } = FluentIcons.MoreHorizontal;
+    public RenderFragment? IconContent { get; set; }
+
+    /// <summary>
+    /// Gets or sets the content to be rendered for the icon when
+    /// the menu is collapsed. <see cref="FluentNavMenuGroup.IconContent"/> will take
+    /// precedence over this setting. If not set, no icon will be displayed
+    /// </summary>
+    [Parameter]
+    public string Icon { get; set; }
 
     /// <summary>
     /// Gets or sets whether the menu group is disabled
@@ -108,8 +117,9 @@ public partial class FluentNavMenuGroup : FluentComponentBase
         .AddStyle(Style)
         .Build();
 
-    private bool HasCollapsedIcon => !string.IsNullOrWhiteSpace(Icon) || CollapsedIconContent is not null;
-    private bool HasExpandedIcon => !string.IsNullOrWhiteSpace(Icon) || ExpandedIconContent is not null;
+    internal bool HasIcon => HasCollapsedIcon || HasExpandedIcon;
+    private bool HasCollapsedIcon => IconContent is not null || !string.IsNullOrWhiteSpace(Icon);
+    private bool HasExpandedIcon => ExpandedIconContent is not null || !string.IsNullOrWhiteSpace(ExpandedIcon);
 
     protected override void OnParametersSet()
     {