maui: [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

Create a MAUI App using Shell
Add the materialdesignicons-webfont.ttf or any other icon font
Register the icon font in MauiProgram.cs using AddFont() in the builder
Define the Icons as static resources in App.xaml or any other resource dictionary
In AppShell.xaml, add a TabBar with Tabs
Use the FontIconSource type on the Tab.Icon property and choose the desired static resource as a glyph
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?

Relevant log output

No response

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 3
Comments: 17 (3 by maintainers)

Most upvoted comments

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 on Oct 19, 2022

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

Wholeheartedly agreed 😃

sthewissen on Oct 19, 2022

Almost a year later and still this issue it seems. I have my Xamarin apps using this with no problem.

What’s the workaround? Does in SVG work?

NunoBem on Jun 30, 2023

I will provide an example as soon as possible

ewerspej on Sep 27, 2022

Hi @ewerspej. We have added the “s/needs-repro” label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

msftbot[bot] on Sep 27, 2022