Segoe UI Symbols/Segoe MDL2 Assets are not properly applied

[MartinZikmund]

Current behavior

Consider the following:

<Button Content="&#xE76C;"
	HorizontalAlignment="Center"
	FontFamily="Segoe UI Symbols" />

or the following:

<Button Content="&#xE76C;"
	HorizontalAlignment="Center"
	FontFamily="Segoe MDL2 Assets" />

In both cases, an invalid icon is rendered on Android:

This may also occur on other platforms, tested on Android only.

Expected behavior

Should render the proper icon.

How to reproduce it (as minimally and precisely as possible)

See above.

Workaround

Reference the Fluent assets font directly:

Environment

Nuget Package:

• Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia
• Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia
• Uno.SourceGenerationTasks
• Uno.UI.RemoteControl / Uno.WinUI.RemoteControl
• Other:

Nuget Package Version(s):

Affected platform(s):

• iOS
• Android
• WebAssembly
• WebAssembly renderers for Xamarin.Forms
• macOS
• Skia
  • WPF
  • GTK (Linux)
  • Tizen
• Windows
• Build tasks
• Solution Templates

[robloo]

This is a duplicate of #4435 as I originally filed it. Note that it may be better to use the resource key for the symbol font in all cases. That means updating the styles in WinUI to stop hard-coding the font I suspect.

I'm not sure we want to actually translate the segoe font names to Uno's equivalent. If anyone wanted to use the windows font for whatever reason then it wouldn't work. The 'correct' fix is to use the symbols font resource.

[MartinZikmund]

I would personally still vote for having this supported out of the box so that we are as close to UWP functionality as possible (e.g. when a new dev starts using Uno, we want to make sure there is the least number of gotchas as possible). My suggestion would be to translate Segoe MDL2 Assets to our font by default and offer a feature flag, that would turn this behavior off if needed (that could be theoretically useful for WASM/WPF).

[robloo]

If it's behind a feature flag that would mitigate my concerns. We would get full compatibility for copy pasted styles or devs that directly use the font name (which they shouldn't). Then if people actually need to use the windows font for whatever reason (the minority of devs for sure) it would still be supported.

[robloo]

I opened an issue in the WinUI repo. I noticed you already changed this in the TabView XAML but really we should change it in the source and just copy/paste XAML verbatim.

microsoft/microsoft-ui-xaml#3745

[robloo]

Note that upstream WinUI just fixed usage of the font name directly. It is now using the symbol font resource instead. Whenever Uno applies the latest styles (likely after the Windows design refresh) this should help for all built-in styles. It's still a good idea of course to translate the font name (enabled by a feature flat).

https://github.com/microsoft/microsoft-ui-xaml/pull/3923/files

GitHub

Avoid hard-coded "Segoe MDL2 Assets" by licanhua · Pull Request #3923 · microsoft/microsoft-ui-xaml

Use indirect {ThemeResource SymbolThemeFontFamily} for font family setting