Share via

NavigationViewItem.Icon Property

  • Reference

Definition

Namespace:
Microsoft.UI.Xaml.Controls
Edit

Gets or sets the icon to show next to the menu item text.

This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

public:
 property IconElement ^ Icon { IconElement ^ get(); void set(IconElement ^ value); };
IconElement Icon();

void Icon(IconElement value);
/// [Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)]
/// [get: Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)]
/// [set: Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)]
IconElement Icon();

void Icon(IconElement value);
public IconElement Icon { get; set; }
[Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)]
public IconElement Icon { [Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)] get; [Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallback(enable=true)] set; }
Public Property Icon As IconElement
<NavigationViewItem Icon="symbolName" .../>


<NavigationViewItem>
  <NavigationViewItem.Icon>
    iconElement
  </NavigationViewItem.Icon>
</NavigationViewItem>

Property Value

IconElement

The icon to show next to the menu item text. The default is null.

Attributes
Microsoft.UI.Xaml.CustomAttributes.MUXPropertyChangedCallbackAttribute

Remarks

You can assign a value from the Symbol enumeration, or a Unicode string that references a glyph in the Segoe MDL2 Assets font.

You can use the Character Map application that comes with Windows to browse the font's glyphs and find their Unicode values. Then, use the format "&#x/(UNICODE);" in XAML, or the format "\u/(UNICODE)" in code, where (UNICODE) is the value of the glyph that indicates the location in the font file.

The Segoe MDL2 Assets font ships with Windows 10, and new glyphs might be added in every release. You should verify that the Unicode value you choose is available in the minimum SDK build version your project targets.

NavigationViewItem also supports AnimatedIcon. If you set an AnimatedIcon as the value of the Icon property, the NavigationViewItem will set the states of the AnimatedIcon for you, according to the states of the control.

The NavigationViewItem will automatically set the following states on the AnimatedIcon:

  • Normal
  • PointerOver
  • Pressed
  • Selected
  • PressedSelected
  • PointerOverSelected

Applies to