[iOS] TabBar Icons not showing when using FontIconSource for Tab.Icon

Description

The icons of the tabs are not showing up on iOS when using FontIconSource on the Tab.Icon property.

Steps to Reproduce

1. Create a MAUI App using Shell
2. Add the materialdesignicons-webfont.ttf or any other icon font
3. Register the icon font in MauiProgram.cs using AddFont() in the builder
4. Define the Icons as static resources in App.xaml or any other resource dictionary
5. In AppShell.xaml, add a TabBar with Tabs
6. Use the FontIconSource type on the Tab.Icon property and choose the desired static resource as a glyph
7. Debug on iOS

Expected Behavior: The TabBar displays the Icons from the FontIconSource Actual Behavior: The TabBar does not display the Icons FontIconSource

Hint: This works fine on Android

Example code:

Resource Dictionary:

  <x:String x:Key="SettingsIcon">&#xF0493;</x:String>
  <x:String x:Key="TimerIcon">&#xF0954;</x:String>

Shell:

  <TabBar>
    <Tab
      Title="{x:Static strings:Strings.HomeLabel}">
      <Tab.Icon>
        <FontImageSource
          FontFamily="materialdesignicons"
          Glyph="{StaticResource TimerIcon}"/>
      </Tab.Icon>
      <ShellContent
        ContentTemplate="{DataTemplate views:MainPage}"
        Route="MainPage"/>
    </Tab>
    <Tab
      Title="{x:Static strings:Strings.SettingsLabel}">
      <Tab.Icon>
        <FontImageSource
          FontFamily="materialdesignicons"
          Glyph="{StaticResource SettingsIcon}"/>
      </Tab.Icon>
      <ShellContent
        Title="{x:Static strings:Strings.SettingsLabel}"
        ContentTemplate="{DataTemplate views:SettingsPage}"
        Route="SettingsPage"/>
    </Tab>
  </TabBar>

Link to public reproduction project repository

https://github.com/ewerspej/dotnet-maui-bug-repro-ios-tabs-shell/

Version with bug

7.0.100-rc.1.22431.12

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15.5

Did you find any workaround?

No

Relevant log output

No response

[sthewissen]

I have something similar, and it seems like they are simply set to the same color as my background (white). When I give them a different background they appear.

 <TabBar Route="Main"
        Shell.TabBarTitleColor="Red"
        Shell.TabBarBackgroundColor="Orange"
        Shell.TabBarForegroundColor="Red"
        Shell.TabBarDisabledColor="Green"
        Shell.TabBarUnselectedColor="Yellow">

Seems a bit like some of these set colors are overridden internally somewhere (iOS16, iPhone14 Pro emulator).

[sthewissen]

All the more reason to fix it, don’t you think? The TabBar is just not usable this way on iOS.

Wholeheartedly agreed 😃