[RC1] - iOS FontImageSource in AppShell TabBar Pixelation

[RichardMarsh]

Description

When using FontImageSource as the Icon source in the TabBar, the resulting icons in the TabBar are heavilly pixelated. So much so that it's fairly pointless to use font icons in iOS.

This works great in Android and allows for great flexiblity when using the AppShell.

See below screenshots for reference

iOS	Android

Reproduction Repo

Steps to Reproduce

1. Create a new .NET MAUI app
2. Add a icon font to the resource folder and include in app start up
3. Setup app shell to use a TabBar and add several ShellContent entries
4. Set the ShellConent Icon property to FontImageSource and use glyphs from the font icons added earlier

Version with bug

Release Candidate 1

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15

Did you find any workaround?

No response

Relevant log output

No response

[kristinx0211]

verified works on Android and the above project, but fail in IOS 15.4. the Icon in the TabBar does not show at all.

[v-longmin]

Verifed repro on ios15.4 with VS 17.3.0 Preview 1.0 [32418.321.main]. Repro project;
Maui.Test-master (1).zip

[davidortinau]

iOS seems to need/want color in order to display.

<TabBar>
		<ShellContent Icon="{FontImage FontFamily='FontIcon', Glyph='&#xe900;', Color=Black, Size=22}"
        Title="Hello, World!"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" >

		</ShellContent>

		<ShellContent
        Title="Hello, World!"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" >
			<ShellContent.Icon>
				<FontImageSource FontFamily="FontIcon" Glyph="&#xe908;" Size="22" Color="Black" />
			</ShellContent.Icon>

		</ShellContent>

		<ShellContent
        Title="Hello, World!"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" >
			<ShellContent.Icon>
				<FontImageSource FontFamily="FontIcon" Glyph="&#xe958;" Color="Black"/>
			</ShellContent.Icon>

		</ShellContent>
	</TabBar>

And FontAwesome also looks pixelated. See address book icon:

[RichardMarsh]

iOS seems to need/want color in order to display.

@davidortinau is this a bug or a feature? Shouldn't these values be pulling through from the app shell's stylesheet value? I think it already does this for png images.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[MGohil]

I have tested this in TabbedPage via Font icons as well as png icons. First two tabs uses FontAwesome icons while other two are using png icons from resources.
As you can see, Android behaves pretty good here but iOS icon shows as white icons.
Even if you select, only text color changes but font icon color remains unchanged.
However, if we use png images, the selection color works good in both platforms. The selection applies to icon and text together.

To overcome above white icon issue for FontAwesome in iOS, as @davidortinau mentioned, we have to explicitly provide the Color to the icon, which solves this problem but again as you can see in below, the selected tab icon still remains unchanged. Only text color changes.

No matter whether we use FontIcon or png both should behave same as it behave in Android.

EDIT:
Color="#64748B" - Works
Color="Gray" - Works
Color="{DynamicResource SelectedTabIconColor}" - Does not work. Color remains white in iOS
This prevents us using Theming.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 5.0. Repro on with sample project Reproduction Repo.
iOS:

Android:

[RobTF]

Same problem here. Xamarin was fine.

[MV10]

They look pretty chunky on Windows, too (this is a high-DPI 4K screen).