Icons Not Displaying Properly in FluentAvalonia 11.2.3 (TTF Format)

[JackGuogit]

Description:
I recently upgraded from FluentAvalonia version 11.1.5 to the latest version 11.2.3. In the previous version (11.1.5), icons in TTF format were displaying correctly without any issues. However, after upgrading to version 11.2.3, I noticed that the icons are not displaying properly. They appear incomplete or distorted.
Steps to Reproduce:
Install FluentAvalonia version 11.2.3.
Add TTF icons to the application using the same code and resources that worked in version 11.1.5.
Run the application and observe the icons.
Expected Behavior:
The icons should display fully and correctly, as they did in version 11.1.5.
Actual Behavior:
The icons are not displaying completely. They appear cut off or distorted.
Additional Information:
Operating System: Windows 10
.NET Version: .NET 8
Screenshots:
Version 11.1.5 (Working): [Attach a screenshot showing the icons displaying correctly]
Version 11.2.3 (Not Working): [Attach a screenshot showing the icons displaying incorrectly]
Possible Causes:
Changes in the rendering engine or styling in version 11.2.3.
Compatibility issues with TTF icon resources or the way they are referenced.
Potential issues with .NET 8 integration in the new version.
Workaround:
Downgrading to version 11.1.5 temporarily resolves the issue, but I would prefer to use the latest version for other improvements and bug fixes.
Request:
I kindly request the development team to investigate this issue and provide a fix or guidance on how to properly display TTF icons in version 11.2.3. Thank you for your attention to this matter.
Best regards

[JackGuogit]

I have found a temporary workaround for the issue with TTF icons not displaying correctly in FluentAvalonia 11.2.3. By explicitly setting the width for FontIcon and SymbolIcon controls, the icons now display correctly. Here is the code snippet that resolved the issue for me:

<Style Selector="ui|FontIcon">
    <Setter Property="Width" Value="24" />
</Style>
<Style Selector="ui|SymbolIcon">
    <Setter Property="Width" Value="24" />
</Style>

This workaround ensures that the icons are fully visible and not distorted. I hope this helps others who might be facing the same issue while using FluentAvalonia 11.2.3.
However, I still believe this is a regression introduced in version 11.2.3, as the icons were working perfectly in version 11.1.5 without any additional styling. I would appreciate it if the development team could look into this and provide a more permanent solution in future updates.
Thank you for your attention to this matter.

[ossandust]

Coincidence : 1 day later I come to this github site with the intention to report the exact same issue. (I'm new to Avalonia so I wasn't aware of the regression) Thanks for the workaround @JackGuogit !

My Avalonia view also contains a menu, the workaround breaks the size of menu icons, so I had to add

<Style Selector="MenuItem > ui|SymbolIcon">
	<Setter Property="Width" Value="14" />
</Style>

[ossandust]

Probably duplicate of #630

[sunpanGithub]

FluentAvalonia.ttf Need to set scale

[timunie]

@sunpanGithub if you have an idea how to fix the issue, a PR may be welcome.

[huaxing-yuan]

It seems that with SymbolIcon, there is a margin on the left side. so icon is pushed to the right, and will be cropped if HorizontalAlignement is not Strench. Controls such as iconbar and treeviewitem are also impacted.

FontIcon also have a margin on the left, but smaller.

In the previews example, with FontSize set to 22, i have to put -5 on SymbolIcon and -2 on FontIcon to center it in the circle.
I haven't found where this margin comes. will dig more in templates when i got some time.

[amwx]

So at least part of the problem seems to come from a change in TextLayout where TextLayou.Width no longer returns the full width.

FluentAvalonia/src/FluentAvalonia/UI/Controls/IconElement/FontIcon.cs

Lines 51 to 53 in 304cece

	var pt = new Point(dstRect.Center.X - _textLayout.Width / 2,
	dstRect.Center.Y - _textLayout.Height / 2);
	_textLayout.Draw(context, pt);

Changing .Width to .WidthIncludingTrailingWhitespace significantly improves this. However, I can still see some icons clipping (you can see it on the copy code button in the Sample app for any of the control samples with code). This is about as far as I have time to investigate right now.

Normally I'd welcome a PR for this, but please do not. I have a branch for an Avalonia 11.2.3 upgrade which has some (breaking) changes on the core Avalonia side that had to be addressed to move to this so I will tie this into that branch - hopefully for a release later this month. However, if anyone has time to continue to investigate this please do.

[Gillibald]

Width and WithIncludingTrailingWhitespace should be the same. I don't get it.

[amwx]

Width and WithIncludingTrailingWhitespace should be the same. I don't get it.

Something changed in the way text metrics are calculated leading up to 11.2.3. Before, it was identical to TextBlock, and now it isn't regardless of .Width or .WidthIncludingTrailingWhitespace.

Git blame brings it back to this PR where you separated Bounds and InkBounds in calculating the CachedMetrics for TextLayout. I don't know anything about all of this so maybe this is a better starting point?

For reference, it's not just the FA symbol icon font that does this. Segoe Fluent Icons also has the issue - TextBlock renders fine (left), but the TextLayout in the FAFontIcon doesn't (this is still using .Width).

Segoe MDL2 Assets renders identical to TextBlock but the Icon is not centered like it used to be for either (again left = TextBlock, right = FAFontIcon, still using .Width):
Before 11.2.3:

After 11.2.3:

[Gillibald]

Adding a unit test for icon fonts and having a look why the metrics isn't correct. Previously it was never possible to calculate the minimal required space for the TextLayout so the metrics calculation was modified to build a union of logical and visual bounds. This should not have affected icon fonts but it somehow did.

[Gillibald]

<TextBlock 
 FontFamily="Segoe MDL2 Assets" 
 Text="&#xe971;" 
 FontSize="44" 
 Background="Magenta"
 HorizontalAlignment="Center"
 VerticalAlignment="Center"/>

The icon has a width of 44 pixels here. I am not sure what you are doing differently here.

[pauldumais]

This issue is also affecting the Scrollbar arrows, there appears to be some padding to the left of the arrow icons causing them to be pushed too much to the right. Works fine in 11.2.2, but 11.2.3+ has this issue:

[amwx]

I still don't know why Width and WidthIncludingTrailingWhitespace are different for some Icon fonts, maybe that's something in the fonts itself?
I do think I've gotten this whole issue sorted out though - I've switched the code to use WidthIncludingTrailingWhitespace as I mentioned above, and fixed my original mistake of not also changing that in MeasureOverride. So now, at least a far as I can tell, icons are rendering correctly again.

From what I can tell, TextBlock uses a different property MinTextWidth which is internal and not set in the same way as the 'width' ones - so that may account for some differences.

[Gillibald]

Inside TextLayout, there is a bug that produces invalid metrics. I will make sure to create a fixing PR shortly. Width is sometimes smaller than WidthIncludingTrailingWhitespace when no whitespace is present inside the layout text. This is wrong.

[JackGuogit]

FluentUI icons have no base/background. After Avalonia merged pull request #17519, changes to the glyph caching mechanism caused FluentUI icons to be displayed incompletely.

[pauldumais]

This issue is also affecting the Scrollbar arrows, there appears to be some padding to the left of the arrow icons causing them to be pushed too much to the right. Works fine in 11.2.2, but 11.2.3+ has this issue:

I found a workaround for the scrollbar arrows being offset, this seams to work for me:

        <Style Selector="RepeatButton">
                <Setter Property="RenderTransform">
                        <TranslateTransform X="-3" />
                </Setter>
                <Style Selector="^ fluentAvalonia|FontIcon">
                        <Setter Property="Width" Value="16" />
                </Style>
        </Style>