Skip to content

Latest commit

 

History

History
87 lines (60 loc) · 4.15 KB

fonticon.md

File metadata and controls

87 lines (60 loc) · 4.15 KB
Raw
-api-id -api-type
T:Microsoft.UI.Xaml.Controls.FontIcon
winrt class

Microsoft.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. Glyph values are assigned by font developers to private Unicode values that don't map to existing code points.

Default font family

If you don't specify a FontFamily, or you specify a FontFamily that is not available on the system at runtime, the FontIcon falls back to the default font family defined by the SymbolThemeFontFamily theme resource.

By default, Windows uses the Segoe Fluent Icon font family. If your app is run on Windows 10, version 20H2 or earlier, the Segoe Fluent Icon font family is not available and the SymbolThemeFontFamily resource falls back to the Segoe MDL2 Asset font family instead. To use glyphs from the default system font, don't set the FontFamily property, let it use its default value.

Tip

Many common glyphs from the SymbolThemeFontFamily are included in the Symbol enumeration. If the glyph you need is available as a Symbol, you can use a SymbolIcon anywhere you would use a FontIcon with the default font family.

Mirroring

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.

Foreground

If you use a FontIcon in an AppBarButton, 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 3 Gallery app and see FontIcon in action

The WinUI 3 Gallery app includes interactive examples of most WinUI 3 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">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Here's how to create the same button in code.

var newAppBarButton = new AppBarButton();
newAppBarButton.Label = "FontIcon";
var fontIcon = new FontIcon();
fontIcon.FontFamily = new FontFamily("Segoe UI Emoji");
fontIcon.Glyph = "\x25B6";
newAppBarButton.Icon = fontIcon;
using namespace winrt::Windows::UI::Xaml;
...

auto newAppBarButton = Controls::AppBarButton{};
newAppBarButton.Label(L"FontIcon");
auto fontIcon = Controls::FontIcon{};
fontIcon.FontFamily(Media::FontFamily{ L"Segoe UI Emoji" });
fontIcon.Glyph(L"\x25B6");
newAppBarButton.Icon(fontIcon);

-see-also

IconElement, AppBarButton, SymbolIcon, Icons for Windows apps