Calcite icons offset issue

[adi13148]

Describe the bug

Here are list of calcite icons that are used in ArcGIS StoryMaps Briefings app and are not centered (have offset placement issues).

List of calcite icons:

1. x-circle
2. X
3. chevron-down
4. user
5. chevron-down
6. view-visible
7. handle-vertical
8. star
9. brightness
10. chevron-left
11. chevron-right
12. arrow-left
13. arrow-right
14. search
15. compass-needle
16. bookmark
17. play
18. pause
19. reset

Additional content

Our dev has created a playground app to check offset placement issues for all calcite icons available in the toolkit. Here is the calcite project - SidoPillai/ubiquitous-calcite: Test Calcite in .NET Maui app.

Offset screenshots

Example of some offset calcite icons with screenshots as seen in the playground app-

Affected Platforms (Check all applicable)

• Windows
• iOS
• Android

[dotMorten]

@adi13148 since the font is made by the calcite design team, can you log this issue over in the calcite-design-system repo?

[adi13148]

Created issue Esri/calcite-design-system#11944 @dotMorten

[dotMorten]

Actually I think you're hitting a .NET MAUI issue in FontImageSource. If I switch to using a label, it's all fine:
Ie if I change your Image icon to a label:
<Label Text="{Binding Glyph}" FontFamily="CalciteUIIconsLargeFontFamily" WidthRequest="24" FontSize="24" />
It looks fine:

Manually inspecting the font and the original SVG doesn't review all issues causing this.

[dotMorten]

Using Maui's FontImageSource vs Label:

[dotMorten]

Caused by dotnet/maui#30004