Search code examples
uwpglyphiconsuno-platform

How to use Font Icon on Uno Platform

I'm trying to use the uno-fluentui-assets following the docs. But it doesn't have samples and I couldn't find a way to make this work.

<Page
    x:Class="UnoPrism.Shared.Views.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UnoPrism.Shared.Views"
    xmlns:prismMvvm="using:Prism.Mvvm"
    xmlns:prismRegions="using:Prism.Regions"
    prismMvvm:ViewModelLocator.AutowireViewModel="True" >

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <NavigationView Header="Super Barato">
            <NavigationView.MenuItems>
                <NavigationViewItem Content="Promoções">
                    <NavigationViewItem.Icon>
                        <FontIcon FontFamily="ms-appx:///Assets/Fonts/uno-fluentui-assets.ttf#" Glyph="&#xE117;"/>
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItem Content="Nova Promoção" Icon="Calendar"/>
            </NavigationView.MenuItems>
        </NavigationView>
  </Grid>
</Page>

The font file was added in Shared/Assets/Fonts folder. The result is a square icon.

app screenshot

Solution

  • The Uno Fluent UI symbol font is a special font that is used by the built-in templates and styles.

    It is possible to reference it manually using the predefined FontFamily resource SymbolThemeFontFamily:

    <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE117;"/>

    Used symbol

    The advantage of using the resource instead of "font path" is that it is future proof and even compatible with UWP, which does not use Uno symbol font and uses the Windows Segoe MDL2 Assets instead.

    If you want to use your own custom font in a Uno Platform app, see this article.