Include a bit more text about icon font(s) in the main page

[Jay-o-Way]

Issue type

enhancement

Which version of the app?

WinUI 3 Gallery

Description

On the page https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.fonticon?view=windows-app-sdk-1.2#default-font-family we can read

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.

Apparenty, this seems to be unclear to some people. Can we add this info on the Icons page?

[niels9001]

@Jay-o-Way A condensed version of this makes sense to add - and the guidance on using particular icon sizes as well? Is this something you'd like to pick up?

[Jay-o-Way]

Yes I would. 👍🏻

[Jay-o-Way]

Would it be good to have a way to collapse the info text, so that there will be more room for the important bits below that? (starting with "Fluent Icons Library")

[niels9001]

Would it be good to have a way to collapse the info text, so that there will be more room for the important bits below that? (starting with "Fluent Icons Library")

I agree.. the Icon search tool is the most important item on this page. I think using an Expander is a good idea, altought it looks a bit strange now with the expandable background/border being transparent?

Here's an potential setup:

[TextBlock] "Segoe Fluent Icons is the recommended icon font on Windows 11....."

[SettingsExpander] "Instructions on how to use Segoe Fluent Icons" (Collapsed by default)
[SettingsExpander.Content]
[SettingsCard] "How to get the font: ..."
[SettingsCard] "How to use Segoe Fluent Icons" (showing different types of code snippets, e.g. using FontIcon and SymbolIcon ....."
[/SettingsExpander.Content]

[Icon tool]

[Jay-o-Way]

Oké, so I have made this now. How's that look?

• The FontIcon link is to online page. I wish to link to the internal app page (IconElement). How could I do that?
  with/without C#
• Should I mark words (like FontFamily) with a style, like the (source) web page does? If so, what exact color?
• My opinion: if the text becomes more, maybe we could give the text and the tool each their own page.

labs:SettingsExpander
    SettingsCard
        RichTextBlock
    SettingsCard
        RichTextBlock
        SampleCodePresenter CodeSourceFile="Icons/FontIconSample1_xaml.txt"

[Jay-o-Way]

FontIcon and SymbolIcon

As long as the SymbolIcon functionally is broken, I'm hesitant to recommend it.