Wrong icons for buttons in Registry Preview

[LIXiangChen]

Microsoft PowerToys version

0.69.0

Installation method

GitHub

Running as admin

None

Area(s) with issue?

Registry Preview

Steps to reproduce

In the Simplified Chinese environment, most icons are garbled characters.

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

Other Software

No response

[htcfreek]

cc: @randyrants

[randyrants]

This one is interesting and likely why toolbars used images for 100 years instead of relying on built-in fonts (as the current incarnation of the commandbar tells you to.)

I'll have to see what happened with this and figure out a path forward.

[randyrants]

Quick ask on this, as there are several ways to assign an icon to the button, and I'm trying to avoid creating images for each of the buttons. I found this, in the blurb about "SymbolIcon" in the API docs:

The SymbolIcon uses the 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.

Based off the screenshot, I'm assuming you're in Windows 11, but can you confirm that "Segoe Fluent Icon" is a font installed to your system? It will take some time for me to find a machine or get a VM-capable box running with Simplified Chinese; I have one or two devices running in other languages somewhere, but I wanted to check your device first.

Likewise, it appears that it might be an issue with XAML itself: microsoft/microsoft-ui-xaml#6392

[LIXiangChen]

@randyrants The system in the screenshot of the original post is Win 10 22H2. I just installed PowerToys in Win 11 22H2 in the virtual machine, and the language is also zh-Hans, the icons displays correctly.

I took a look, the font "Segoe MDL2 Assets" exists in both systems, but the font "Segoe Fluent Icons" only exists in Win 11.

And after I manually installed the "Segoe Fluent Icons" font to Win 10, the software GUI became correct.

Then there are two things involved here:

1. My Win 10 is 22H2, but "Segoe Fluent Icons" still does not exist by default, which means that the document may not be accurate (may be related to language packs or certain system components).
2. "Segoe Fluent Icons" does not directly fallback to "Segoe MDL2 Assets", there are other fonts between them, that is, this font-fallback-chain is not clean (uncontrollable).

Therefore, if there is a way to directly specify the font-fallback-chain in the software, just like the CSS statement: font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";, this issue should be solved.

[randyrants]

I think I have it. I switched how the icon was being selected and told it to use the StaticResource SymbolThemeFontFamily which should handle the fallback better. If it doesn't, I'll pull someone into the conversation to see what the options are, like locking it to the Windows 10 font, rather than 11.

[htcfreek]

I am using Windows 10 and have no problems. Usung the static resource soud good to me and I think that should fix it.

[randyrants]

I am using Windows 10 and have no problems. Usung the static resource soud good to me and I think that should fix it.

I agree it should, but the fallback behavior with zh-Hans hasn't, well, fallen back as it should. On Win11, it should use Segoe Fluent Icons, but on Win10 it should look for Segou MDL2 Assets, and if Windows 8 was supported, it should look for Segoe UI Symbol. For LIXiangChen, Windows 10 with Simplified Chinese, the original code picked up an unexpected font for the icon, which is the oddity. My hope is that by calling out the StaticResource explicitly, it will behave better.

WinUI3 just has some odd behavior at times. Normally, I would think I've missed something but the last few days, have the stuff I'm debugging ends up being broken for everyone, which leave me confused!

[Jay-o-Way]

This issue is well familiar to me. The icons are defined with their names, like Icon="Save" but for some reason the actual icon code points connected to those names (the SymbolIcons in Win SDK) are all in the range of E1**. Range E1** - E5** has been deprecated for years now. Right, @niels9001 and @crutkas ?

[Jay-o-Way]

See also microsoft/microsoft-ui-xaml#8375

[Jay-o-Way]

@randyrants the changes in your open pr circumvent this by specifically setting the icons with valid code points 👍🏻

[niels9001]

Related: microsoft/microsoft-ui-xaml#8375

[Jay-o-Way]

@niels9001 that's what I said 😝. I made MicrosoftDocs/winrt-api#2363 to specifically focus on the Docs/SymbolIcon page.

[hidacow]

There's another one with the same issue in Flyout, which uses xE130. It looks like this:

[Jay-o-Way]

Yes, I'm aware of that one, @niels9001 is too.

[1332186865]

The content to the right of the number is also wrong. This error is very interesting.

[Jay-o-Way]

@1332186865 That one is on Microsoft, see issue linked above.

[htcfreek]

Can we please limi discussion on the original reported bug.

[htcfreek]

Who is working here on fixing what and is the fix for the initial report merged? I am a bit confused as this issues moved somehow away from the initial bug report.

[niels9001]

@htcfreek If no one is picking this up I'm happy to help with this as I'm working on a UI related PR for Registry Preview anyway 👍

[htcfreek]

@niels9001
It seems that a fix PR from @randyrants is merged. But I am not sure if 1. everything is fixed now and 2. what @Jay-o-Way is working on.

[Jay-o-Way]

1. Yes
2. I'm working on ui-xaml, the core for many of these issues still.

*At least, for a number of icons in specific controls. Not the entire SymbolIcon function

[AureliusPatiens]

This has not been successfully fixed

The content to the right of the number is also wrong. This error is very interesting.

There's another one with the same issue in Flyout, which uses xE130. It looks like this:

[jaimecbernardo]

This has been shipped for 0.70.0. Please updated to the latest release. Thank you.