Icon Rendering Issue

[giiyms]

Describe the bug

Hello,

I am having rendering issues with certain Icons.
Instead of an icon appearing, it seems some hieroglyphs are shown instead.
Most of them work correctly but many fail, see Desk or Folder icons below. There are many many more.

I have imported the Segoe Fluent Icons font to see if that fixed it but it did not.
Any ideas?

To Reproduce

IconsPage.xaml.cs

using Wpf.Ui.Controls;
using Button = Wpf.Ui.Controls.Button;

namespace Demo.Features.Icons;

public partial class IconsPage : Page
{
    private IEnumerable<SymbolRegular> _allIcons =  Enum.GetValues(typeof(SymbolRegular)).Cast<SymbolRegular>().ToList();

    public IconsPage()
    {
        InitializeComponent();
        LoadIcons();
    }

    private void LoadIcons(string filter = "")
    {
        IconsWrapPanel.Children.Clear();
        var iconTypes = _allIcons
            .Where(icon =>
            {
                return icon.ToString().Contains(filter, StringComparison.OrdinalIgnoreCase);
            })
            .OrderBy(icon => icon.ToString());
        foreach (SymbolRegular iconType in iconTypes)
        {
            var button = new Button
            {
                Content = iconType.ToString(),
                Margin = new Thickness(5),
                Icon = new SymbolIcon { Symbol = iconType },
                Width = 400,
                Height = 50,
            };
            IconsWrapPanel.Children.Add(button);
        }
    }

    private void SearchBox_TextChanged(object sender, TextChangedEventArgs e)
    {
        LoadIcons(SearchBox.Text);
    }
}

IconsPage.xaml

<Page x:Class="Dummy.Features.Icons.IconsPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
      xmlns:local="clr-namespace:Demo.Features.Icons"
      Title="IconsPage"
      d:DataContext="{d:DesignInstance local:IconsPage, IsDesignTimeCreatable=False}"
      d:DesignHeight="450"
      d:DesignWidth="800"
      ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
      ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
      Foreground="{DynamicResource TextFillColorPrimaryBrush}"
      ScrollViewer.CanContentScroll="False"
      mc:Ignorable="d">
    <Grid x:Name="configGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ui:TextBox Grid.Row="0" x:Name="SearchBox" TextChanged="SearchBox_TextChanged"
                    PlaceholderText="Search Icons...">
        </ui:TextBox>
        <ui:FontIcon Grid.Row="1" FontFamily="Segoe Fluent Icons" Glyph="&#xE700;" />
        <ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
                      Width="{Binding ElementName=configGrid, Path=ActualWidth}">
            <WrapPanel x:Name="IconsWrapPanel" Orientation="Horizontal" HorizontalAlignment="Left" />
        </ScrollViewer>
    </Grid>
</Page>

Expected behavior

An icon to be rendered not a hieroglyph

Screenshots

No response

OS version

Windows 11

.NET version

net8.0-windows10.0.17763

WPF-UI NuGet version

4.0.0-rc.2

Additional context

No response

[Difegue]

This is an issue with Fluent System Icons themselves, as they position multiple icons beyond the base Unicode Private Use Area.
WPF doesn't support this properly.
microsoft/fluentui-system-icons#321

[Difegue]

Although FontIcon can be used directly instead of SymbolIcon as a workaround:
<ui:FontIcon FontFamily="{StaticResource FluentSystemIcons}" Glyph="&#xF0140;"/>