Microsoft-ui-xaml: Proposal: Make Icon of NavigationViewItem templatable

[JustinXinLiu]

Proposal: Make Icon of NavigationViewItem templatable

Summary

Make Icon a type of object that can take any element, and add an IconTemplate property that allows for full customization. The max width of the Icon element should respect the value of CompactPaneLength.

Rationale

• The current Icon property only accepts elements of type IconElement, which limits its usage.

Scope

| Capability | Priority |
| :---------- | :------- |
| This proposal will allow developers to display any type of elements they want in the Icon area. | Must |

[Felix-Dev]

One specific example where this would be helpful is developers wanting to show a PersonPicture element as the leftmost element of a NavigationViewItem (see here and here for examples).

Due to the current restrictions of the NavigationViewItem.Icon API developers have to use the NavigationViewItem.Content API instead. If they want to show a content string next to the PdersonPicture, they will have to do all the work for that:

<NavigationViewItem>
    <NavigationViewItem.Content>
        <StackPanel Orientation="Horizontal">
            <PersonPicture Width="20" Height="20" />
            <TextBlock Text="Account" Margin="10,0,0,0" />
        </StackPanel>       
    </NavigationViewItem.Content>
</NavigationViewItem>

It would be better if developers could just do this instead:

<NavigationViewItem Content="Account">
    <NavigationViewItem.Icon>
        <PersonPicture Width="20" Height="20" />
    </NavigationViewItem.Icon>
</NavigationViewItem>

[MarcoEnxuto]

Exactly. I read this post earlier, i found this would be the closest to my question #3116 Thanks again for your time @Felix-Dev

[ad1Dima]

I think this is better than #1488

[Javier118]

Hello:
you could add Svg support for icons in NavigationViewItem in this winUi3 version.

[ad1Dima]

you could add Svg support for icons in NavigationViewItem in this winUi3 version.

@Javier118 In UWP ImageSource supports SVG files. If WinUI3 version of ImageSource doesn't support it, you'd better to make new proposal for this.