fonticon.md

-api-id	-api-type
T:Windows.UI.Xaml.Controls.FontIcon	winrt class

Windows.UI.Xaml.Controls.FontIcon

-description

Represents an icon that uses a glyph from the specified font.

-xaml-syntax

<FontIcon .../>

-remarks

Use FontIcon to specify an icon using a Glyph value from a FontFamily. You must have the font available for the glyphs to show. Glyph values are assigned by font developers to private Unicode values that don’t map to existing code points. Windows 10 uses the Segoe MDL2 Assets FontFamily, and the glyphs are included in the Symbol enumeration.

You can set the MirroredWhenRightToLeft property to have the glyph appear mirrored when the FlowDirection is RightToLeft. You typically use this property when a FontIcon is used to display an icon as part of a control template and the icon needs to be mirrored along with the rest of the control.

Note

You can set the Foreground property on the AppBarButton or on the FontIcon. If you set the Foreground on the AppBarButton, it's applied only to the default visual state. It's not applied to the other visual states defined in the AppBarButton template, like MouseOver. If you set the Foreground on the FontIcon, the color is applied to all visual states.

-examples

Tip

For more info, design guidance, and code examples, see Command bar.

[!div class="nextstepaction"] Open the WinUI 2 Gallery app and see the FontIcon in action

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

This example shows an AppBarToggleButton with a FontIcon.

<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE790;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

var newAppBarButton = new AppBarButton();
var fontIcon = new FontIcon();
fontIcon.FontFamily = new FontFamily("Segoe MDL2 Assets");
fontIcon.Glyph = "\xE790";
newAppBarButton.Icon = fontIcon;

using namespace winrt::Windows::UI::Xaml;
...

auto newAppBarButton = Controls::AppBarButton{};
auto fontIcon = Controls::FontIcon{};
fontIcon.FontFamily(Media::FontFamily{ L"Segoe MDL2 Assets" });
fontIcon.Glyph(L"\xE790");
newAppBarButton.Icon(fontIcon);

-see-also

IconElement, AppBarButton, Icons for UWP apps