Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SymbolIcon rendering issues with characters beyond base Unicode points #1232

Open
giiyms opened this issue Sep 23, 2024 · 3 comments
Open

SymbolIcon rendering issues with characters beyond base Unicode points #1232

giiyms opened this issue Sep 23, 2024 · 3 comments
Assignees
Labels
bug Something isn't working help_wanted Extra attention is needed icons Fonts and icons updates

Comments

@giiyms
Copy link

giiyms commented Sep 23, 2024

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.

image

image

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

@giiyms giiyms added the bug Something isn't working label Sep 23, 2024
@Difegue
Copy link
Contributor

Difegue commented Oct 1, 2024

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
Copy link
Contributor

Difegue commented Oct 1, 2024

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

@pomianowski pomianowski pinned this issue Feb 4, 2025
@pomianowski pomianowski self-assigned this Feb 4, 2025
@pomianowski pomianowski changed the title Icon Rendering Issue SymbolIcon rendering issues with characters beyond base Unicode points Feb 4, 2025
@pomianowski
Copy link
Member

Enumerations for icons are generated in this funky program https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui.FontMapper/Program.cs.

I think this problem can be solved in WPF, a good set of information about font management in C# is this great project
https://github.com/character-map-uwp/Character-Map-UWP

@pomianowski pomianowski added help_wanted Extra attention is needed icons Fonts and icons updates labels Feb 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help_wanted Extra attention is needed icons Fonts and icons updates
Projects
Status: Todo
Development

No branches or pull requests

3 participants