Avalonia Foreground Color Broken on macOS

[hdocsek]

I discovered that with the latest version of FluentIcons.Avalonia on macOS (Sonoma 14.4.1) the Foreground color is not applied. However, this works on Win 11 as well as on Linux Ubuntu 22.04.

The behavior was introduced in FluentIcons.Avalonia v1.1.230, but it was still working in version FluentIcons.Avalonia v1.1.228. I could not figure out the root cause, but I noticed that the fonts have been updated between these versions. Maybe this is related.

Behavior/Issue: SymbolIcon Foreground color is not applied on macOS.

Steps to reproduce:

Project File:

<Project Sdk="Microsoft.NET.Sdk">
    ...
    <ItemGroup>
        <!--  Broken starting with 1.1.230 -->
        <PackageReference Include="FluentIcons.Avalonia" Version="1.1.233" />
        <!--  Working -->
        <!-- <PackageReference Include="FluentIcons.Avalonia" Version="1.1.228" /> -->
    </ItemGroup>
    ....
</Project>

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ic="clr-namespace:FluentIcons.Avalonia;assembly=FluentIcons.Avalonia"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="SymbolForegroundIssue.MainWindow"
        Title="SymbolForegroundIssue">

    <ic:SymbolIcon Symbol="Home" IsFilled="True" Foreground="Red" />

</Window>

Expected Outcome:

SymbolIcon Foreground color should be Red on macOS.

[davidxuang]

I suspect the reason is that SkiaSharp can't handle OpenType COLR table on macOS. Starting with version 1.1.230, COLR table is added to the font to render color flags properly, but it didn't cover, and shouldn't affect other characters. I suppose this should be forwarded to upstream.

[davidxuang]

@hdocsek I've uploaded an experimental version 1.1.234-exp for Avalonia, with COLR table dropped from TTF files. If my guess was correct, this version should work on macOS. I couldn't find an environmet to reproduce the issue shortly, so could you test this version to validate the theory?

[hdocsek]

@davidxuang Seems like you were spot on. Version 1.1.234-exp works correctly on macOS.

[davidxuang]

@hdocsek Could you also attach a screenshot for both 1.1.234 and 1.1.234-exp, to provide references to upstream? Please include both a regular icon and a color icon, like:

<StackPanel>
    <ic:SymbolIcon Symbol="Home" IsFilled="True" />
    <ic:SymbolIcon Symbol="Home" IsFilled="True" Foreground="Red" />
    <ic:SymbolIcon Symbol="FlagPride" IsFilled="True" />
    <ic:SymbolIcon Symbol="FlagPride" IsFilled="True" Foreground="Red" />
</StackPanel>

[hdocsek]

@davidxuang Here are the screenshots for both versions:

[davidxuang]

@hdocsek Can you confirm if this issue also applies to SkiaSharp 3 preview? It seems to me Avalonia 11.1 beta series work with SkiaSharp 3 preview. (3.0.0-preview.0.132 is actually 3.0.0-preview.3.132 mislabelled)

    <PackageReference Include="Avalonia" Version="11.1.0-beta1" />
    <PackageReference Include="SkiaSharp" Version="3.0.0-preview.0.132" />

[hdocsek]

@davidxuang Referencing SkiaSharp 3.0.0-preview.0.132 seems to fix the issue no matter if Avalonia 11.0.10 or 11.1.0-beta1 is used.