Missing icon in Segoe MDL2 Assets font family

Question

I'm trying to create an AppBarButton where the icon property is a FontIcon but the specific icon I want to use is not working; it is showing as a rectangle.

I'm creating a UWP app in C# and I'm trying to create a button with the QR Code (Unicode point ED14) icon from the Segoe MDL2 Assets font but when I enter the icon identifier into the Glyph property of the FontIcon element it simply shows the placeholder rectangle as if the font is not installed. Every other icon I have used in my app works just fine, but this one is not appearing.

I have made sure to copy working buttons and simply change the icon code but it does not work. I have also tried placing the code for known working icons into the broken button and that works just fine. There seems to be something wrong with the QR Code icon found on this page https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font.

Button in question:

<AppBarButton Label="QR Codes" Click="{x:Bind NewExhibitionAsync}">
    <AppBarButton.Icon>
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xED14;"/>
    </AppBarButton.Icon>
</AppBarButton>

Full CommandBar:

<CommandBar>
    <AppBarButton Label="Open...">
        <AppBarButton.Icon>
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8E5;"/>
        </AppBarButton.Icon>
    </AppBarButton>
    <AppBarButton Icon="Save" Label="Save" />
    <AppBarButton Label="Save as...">
        <AppBarButton.Icon>
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE792;"/>
        </AppBarButton.Icon>
    </AppBarButton>

    <AppBarSeparator/>

    <AppBarButton Icon="Add" Label="New Exhibition" Click="{x:Bind NewExhibitionAsync}"/>
    <AppBarButton Label="QR Codes" Click="{x:Bind NewExhibitionAsync}">
        <AppBarButton.Icon>
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xED14;"/>
        </AppBarButton.Icon>
    </AppBarButton>
    <AppBarButton Label="Set Primary Photo" Click="{x:Bind SetStarred}" IsEnabled="{x:Bind SetStarredEnabled, Mode=OneWay}">
        <AppBarButton.Icon>
            <SymbolIcon Symbol="SolidStar" Foreground="Goldenrod"/>
        </AppBarButton.Icon>
    </AppBarButton>

    <AppBarSeparator/>

    <AppBarButton Icon="Delete" Label="Delete" Click="{x:Bind DeleteArtefactAsync}" IsEnabled="{x:Bind DeleteArtefactEnabled, Mode=OneWay}"/>
    <AppBarButton Icon="Edit" Label="Edit" Click="{x:Bind EditArtefactAsync}" IsEnabled="{x:Bind EditArtefactEnabled, Mode=OneWay}"/>
</CommandBar>

The above code currently displays as per the following image when placed into a CommandBar.

Does anyone have any idea how to get the icon to display as shown on the Microsoft docs? It should look like this image. (Sorry, not enough reputation to post images properly.)

Answer 1

This problem occurs, indicating that your system version may be lower.

Segoe MDL2 Assets is the system icon font, which changes with the system update. The QR Code icon appears later, and it is not available in the lower version system.

So please try to update your system. Or copy the font on a higher version of the system and install it on a lower version system

Best regards.

Answer 2

Just to add to the answer from @Richard Zhang - MSFT, if you are targeting devices with lower version than the font icon or emoji you want to use in your app is supported on, the proper solution would probably be to not use this specific icon. Instead, it would make sense to use a BitmapIcon with a png version of the icon or even better a PathIcon with extracted SVG path of the icon itself.

Luckily, you can find many suitable icons you can use in your app on-line with services like Icons8 or Syncfusion Metro Studio.

For emojis, you can check version support at https://emojipedia.org/. Unfortunately I am not aware of a similar source for the MDL2 asset font.