IOS: Custom font icon is not rendered in a shell tabbar tab #8244

lnaie · 2022-06-22T16:17:09Z

Description

Did attach some screenshots and a code sample.

MauiApp3.zip

Steps to Reproduce

It's all in the sample code.

Version with bug

6.0.400 (current)

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 · 2022-06-23T02:39:55Z

verified repro on IOS15.4 with vs 17.3.0 Preview 3.0 [32621.293.main].

ghost · 2022-08-30T14:41:47Z

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.

legrignotin · 2022-10-10T12:51:20Z

I am having the same problem too :/

Actually they are rendered, the color is just white on white...
If you force a color on the glyph you'll see it but you'll lose the selected item style, disabled style etc...

NPadrutt · 2022-10-20T12:03:32Z

I'm at the same point as @legrignotin.
It's a bit surprising to me that this is open for so long and now moved to the backlog (as is the issue with the TitleView) as those are small details that make an app look very unpolished.

yurkinh · 2022-10-20T12:23:04Z

Checked this issue with Maui in NET 7 RC2 an it is still present(

NPadrutt · 2022-10-22T20:51:35Z

Has this issue any relation with the issue that images on iOS are blurry when a page is first rendered?

phookycom · 2022-11-09T09:44:57Z

Is there any news on this? Unfortunately, the problem was not solved with NET 7.0 GA. And explicitly specifying the color of the TabIcon is not a solution, because the behavior of the tabs is then no longer dynamic.

<FontImageSource FontFamily="FontAwesomeSolid" Glyph="" Size="22" Color="{StaticResource Primary}" />

KieranMaclagan · 2022-11-16T14:58:27Z

We're affected by this too. If I'm remembering correctly it was an issue in Xamarin Forms as well. A fix would add some nice polish to MAUI!

andrei25f · 2022-11-18T10:10:47Z

In the attached project (MauiApp3.zip), сhange this:
<Tab Route="main" Title="Home">
<Tab.Icon>
<FontImageSource FontFamily="MD" Glyph="{x:Static res:IconFont.HomeOutline}" Size="24"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
To:
<Tab Title="Home" Icon="{FontImage Color=Black, FontFamily=MD, Glyph={x:Static res:IconFont.HomeOutline}, Size=24}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="main" />
</Tab>

Adelzu · 2022-11-20T16:18:44Z

In the attached project (MauiApp3.zip), сhange this:
<Tab Route="main" Title="Home">
<Tab.Icon>
<FontImageSource FontFamily="MD" Glyph="{x:Static res:IconFont.HomeOutline}" Size="24"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
To:
<Tab Title="Home" Icon="{FontImage Color=Black, FontFamily=MD, Glyph={x:Static res:IconFont.HomeOutline}, Size=24}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="main" />
</Tab>

By specifying black as the icon color, you just lost dark theme

am-kh · 2023-01-21T22:12:08Z

Any news on this??

NPadrutt · 2023-01-22T12:05:04Z

Still waiting on a fix for this too. Given it is still on the backlog, I don't think there was a lot of progress yet.

rysbilinski · 2023-01-25T09:47:54Z

@NPadrutt @am-kh

If it helps anyone, I managed to workaround this using styles and triggers

<Tab Title="Inbox" FlyoutItemIsVisible="False" Icon="{FontImage FontFamily=Material, Glyph={x:Static font:MaterialFontIcons.Notifications}}" Route="NotificationsPage" Style="{OnPlatform iOS={StaticResource notificationsTab}}"> <ShellContent ContentTemplate="{DataTemplate views:NotificationsPage}" /> </Tab>

Then the style:

NPadrutt · 2023-01-25T20:02:29Z

thanks @rysbilinsk! The only issue I have with this, is that I would have to have different colors for different themes. I tried using an AppThemeBinding for Color:

                <Trigger TargetType="Tab" Property="IsChecked" Value="True">
                    <Setter Property="Icon"
                            Value="{FontImage FontFamily=MaterialIcons, Glyph={x:Static views:IconFont.HomeOutline}, Color={AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource White}}}" />
                </Trigger>

But that gives me an error, that there is no property for Color. Before I used an FontImageSource, but I haven't found out how to use that in the style yet. In case you know how to solve that I'd greatly appreciate any hint :)

rysbilinski · 2023-01-31T14:11:50Z

thanks @rysbilinsk! The only issue I have with this, is that I would have to have different colors for different themes. I tried using an AppThemeBinding for Color:
                <Trigger TargetType="Tab" Property="IsChecked" Value="True">
                    <Setter Property="Icon"
                            Value="{FontImage FontFamily=MaterialIcons, Glyph={x:Static views:IconFont.HomeOutline}, Color={AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource White}}}" />
                </Trigger>
But that gives me an error, that there is no property for Color. Before I used an FontImageSource, but I haven't found out how to use that in the style yet. In case you know how to solve that I'd greatly appreciate any hint :)

have to be honest I am forcing my app to only have light theme for now.

Could you maybe have the app theme binding on a resource dictionary? And have a resource dictionary containing the different themes for each file? Or just duplicate the themes for dark and light and apply the app theme binding on the style in the tab item?

arahmancsd · 2023-03-29T22:41:09Z

Finally, I fixed mine with this approach and it works as expected in iOS

<Tab Title="Discover">
            <Tab.Style>
                <Style TargetType="Tab">
                    <Style.Triggers>
                        <Trigger TargetType="Tab" Property="IsChecked" Value="True">
                            <Setter Property="Icon">
                                <Setter.Value>
                                    <FontImageSource Size="20" Color="{DynamicResource Primary}"
                                                     Glyph="{x:Static util:FontAwesomeIcons.Home}"
                                                     FontFamily="Fas"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger TargetType="Tab" Property="IsChecked" Value="False">
                            <Setter Property="Icon">
                                <Setter.Value>
                                    <FontImageSource Size="20" Color="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}"
                                                     Glyph="{x:Static util:FontAwesomeIcons.Home}" FontFamily="Fas"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Tab.Style>
            <ShellContent ContentTemplate="{DataTemplate homeTabViews:HomePage}"/>
        </Tab>

NPadrutt · 2023-03-31T12:09:35Z

Finally, I fixed mine with this approach and it works as expected in iOS

<Tab Title="Discover">
            <Tab.Style>
                <Style TargetType="Tab">
                    <Style.Triggers>
                        <Trigger TargetType="Tab" Property="IsChecked" Value="True">
                            <Setter Property="Icon">
                                <Setter.Value>
                                    <FontImageSource Size="20" Color="{DynamicResource Primary}"
                                                     Glyph="{x:Static util:FontAwesomeIcons.Home}"
                                                     FontFamily="Fas"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger TargetType="Tab" Property="IsChecked" Value="False">
                            <Setter Property="Icon">
                                <Setter.Value>
                                    <FontImageSource Size="20" Color="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}"
                                                     Glyph="{x:Static util:FontAwesomeIcons.Home}" FontFamily="Fas"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Tab.Style>
            <ShellContent ContentTemplate="{DataTemplate homeTabViews:HomePage}"/>
        </Tab>

This solution works for me on iOS, but has weird side effects on Android.

ewerspej · 2023-10-06T13:58:24Z

Is there any update on this issue?

arnaudaug · 2023-10-06T14:59:26Z

In addition to the solution proposed above with triggers, in the meantime if it helps you, I use this code in App.xaml.cs :

Current.MainPage = DeviceInfo.Platform == DevicePlatform.iOS || DeviceInfo.Platform == DevicePlatform.MacCatalyst ? new AppShellApple() : new AppShell();

SliemBeji-FBC · 2023-11-03T09:38:18Z

Unfortunately still a problem :( WE ARE ALSO AFFECTED

zippo227 · 2023-12-16T05:58:51Z

Here is a complete solution that works for both. I have configured the Android theme in the Resources folder so didn't add the Android styling.

    <On Platform="Android">
        <TabBar>
            
            <Tab Title="My Day">
                <ShellContent ContentTemplate="{DataTemplate todayTab:MyDayPage}" />
                <Tab.Icon>
                    <FontImageSource Glyph="{x:Static util:FontAwesomeIcons.Check}" FontFamily="Fas"/>
                </Tab.Icon>
            </Tab>
            ....
        </TabBar>
    </On>

    <On Platform="iOS">
            <TabBar>

                <Tab Title="My Day">
                    <ShellContent ContentTemplate="{DataTemplate todayTab:MyDayPage}"/>

                    <Tab.Style>
                        <Style TargetType="Tab">
                            <Style.Triggers>
                                <Trigger TargetType="Tab" Property="IsChecked" Value="True">
                                    <Setter Property="Icon">
                                        <Setter.Value>
                                            <FontImageSource Size="20"
                                                         Color="{DynamicResource Primary}"
                                                 Glyph="{x:Static util:FontAwesomeIcons.Check}"
                                                 FontFamily="Fas"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>

                                <Trigger TargetType="Tab" Property="IsChecked" Value="False">
                                    <Setter Property="Icon">
                                        <Setter.Value>
                                            <FontImageSource Size="20" Color="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}"
                                                 Glyph="{x:Static util:FontAwesomeIcons.Check}"
                                                 FontFamily="Fas"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </Style.Triggers>
                        </Style>

                    </Tab.Style>
                </Tab>

            </TabBar>
             ....
        </On>
</OnPlatform>

This solution did resolve my issues on iOS, though the OnPlatform parts had compile time issues for me. In my case the settings for android are mostly unaffected by the settings in here, so I do not, as of yet require setting OnPlatform.

I do hope the maui team is able to find a way to remove the requirement for this on iOS.

bcaceiro · 2024-01-17T17:12:56Z

Also the sizes are completely screwed using icon fonts

matt-goldman · 2024-02-09T23:16:57Z

Seem to be having the same problem with Flyout. And the workaround doesn't work as the IsChecked property doesn't get set. According to the docs we should do this on the Selected state using VisualStateManager, but I couldn't get it working.

softlion · 2024-03-14T14:47:12Z

Same issue with TabbedPage. No xaml workaround as a page don't have IsChecked property.

MitchBomcanhao · 2024-03-14T14:56:22Z

Same issue with TabbedPage. No xaml workaround as a page don't have IsChecked property.

@softlion check #12250 (comment) for a workaround to get icons displayed on tabbedpages.

softlion · 2024-03-14T15:00:41Z

Same issue with TabbedPage. No xaml workaround as a page don't have IsChecked property.

@softlion check #12250 (comment) for a workaround to get icons displayed on tabbedpages.

It's not for iOS, it's both Android and iOS. I actually experience the issue on Android.

Here is my workaround:

public class TabbedPage2 : TabbedPage
{
 protected override void OnPagesChanged(NotifyCollectionChangedEventArgs e)
    {
        base.OnPagesChanged(e);
        
        
        if (e is { Action: NotifyCollectionChangedAction.Add, NewItems: not null })
        {
            foreach (var page in e.NewItems.OfType<Page>())
                FixIconColor(page);
        }
    }

    /// <summary>
    /// Workaround for  https://github.com/dotnet/maui/issues/8244
    /// </summary>
    private void FixIconColor(Page page)
    {
        if(page.IconImageSource is SvgImageSource imageSource)
        {
            imageSource.ColorMapping = [
                new() { OldColor = Colors.Black, NewColor = UnselectedTabColor},
                new() { OldColor = Colors.White, NewColor = UnselectedTabColor},
            ];
            page.IconImageSource = null;
            page.IconImageSource = imageSource;

            var selectedImageSource = new SvgImageSource
            {
                Source = imageSource.Source,
                Height = imageSource.Height,
                ColorMapping = [new() { OldColor = Colors.Black, NewColor = SelectedTabColor }],
            };
            
            var selectedPageStyle = new Style(typeof(Page)) { ApplyToDerivedTypes = true };
            selectedPageStyle.Triggers.Add(new DataTrigger(typeof(Page))
            {
                Binding = new Binding(nameof(CurrentPage), source: this),
                Value = page,
                Setters = {{ IconImageSourceProperty, selectedImageSource }}
            });
            page.Style = selectedPageStyle;
        }
    }
}

It uses SvgImageSource but you can do the same for any type of source.

Ty @MitchBomcanhao !

MitchBomcanhao · 2024-03-14T15:03:22Z

well, this bug is about iOS, so it would seem that your android issue would be a different one.

zaidmka · 2024-04-09T19:31:58Z

i had this bug as well
`
<Shell
x:Class="TeaStoreApp.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TeaStoreApp"
xmlns:pages="clr-namespace:TeaStoreApp.Pages"
Shell.FlyoutBehavior="Disabled"
Shell.TabBarBackgroundColor="#18565F"
Shell.TabBarTitleColor="Red"
Shell.TabBarUnselectedColor="Green"

>

<TabBar>
    <Tab Title="Home" Icon="home_25">
        <ShellContent ContentTemplate="{DataTemplate pages:HomePage}"/>
    </Tab>

    <Tab Title="Cart" Icon="cart_25">
        <ShellContent ContentTemplate="{DataTemplate pages:CartPage}"/>
    </Tab>

    <Tab Title="Favorites" Icon="heart_25">
        <ShellContent ContentTemplate="{DataTemplate pages:FavoritePage}"/>
    </Tab>

    <Tab Title="Profile" Icon="profile_25">
        <ShellContent ContentTemplate="{DataTemplate pages:ProfilePage}"/>
    </Tab>
</TabBar>

` this is the AppShell its act deferentin iOS and Android ![Screenshot 2024-04-09 223053](https://github.com/dotnet/maui/assets/83184605/4ea64445-ea00-4890-81ae-4aa0723f8670) ![Screenshot 2024-04-09 223044](https://github.com/dotnet/maui/assets/83184605/9c10874d-d71f-462e-96b6-9fb1d299c226) also i cant adjust the bar heigh!

tscholze · 2024-04-14T17:10:30Z

I stumbled across this, too. Commenting for update information

ewerspej · 2024-04-15T08:37:18Z

I stumbled across this, too. Commenting for update information

@tscholze You can also subscribe to posts without commenting ;) JFYI

tscholze · 2024-04-15T08:39:08Z

@ewerspej a thanks I totally forgot it. I really hope that experts like you can fix this issue soon. :)

ewerspej · 2024-04-15T08:46:47Z

@tscholze I'm actually not a member of the development team, but I'm looking for workarounds while it's not fixed. I'm not that deep into the internals of MAUI yet.

breyed · 2024-05-25T17:45:59Z

StackOverflow post on issue (with additional workaround)

samhouts · 2024-06-18T23:29:05Z

We agree that this is an important issue. As our roadmap indicates, for the near future, we are focused on:

Issues impacting Xamarin.Forms upgrades to .NET MAUI
CollectionView
Layout

I am marking this as a p/2 issue because it does not meet our focus areas right now, but we are constantly revisiting the backlog for important issues to address as time allows. Thank you for your patience and understanding!

lnaie added s/needs-verification Indicates that this issue needs initial verification before further triage will happen t/bug Something isn't working labels Jun 22, 2022

Eilon added the area-controls-shell Shell Navigation, Routes, Tabs, Flyout label Jun 22, 2022

PureWeen added platform/android 🤖 and removed s/needs-verification Indicates that this issue needs initial verification before further triage will happen labels Jun 22, 2022

kristinx0211 added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jun 23, 2022

rachelkang added this to the 6.0-servicing milestone Jun 27, 2022

rachelkang added platform/iOS 🍎 and removed platform/android 🤖 labels Jun 27, 2022

Redth modified the milestones: 6.0-servicing, Backlog Aug 30, 2022

sthewissen mentioned this issue Oct 19, 2022

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

Closed

samhouts removed s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Apr 5, 2023

jinxinjuan added s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage labels May 17, 2023

arahmancsd mentioned this issue Jul 3, 2023

.NET Maui Shell colors behavior is not the same as Xamarin Forms and difficult to comprehend #6718

Open

samhouts added the p/1 Work that is important, and has been scheduled for release in this or an upcoming sprint label Dec 19, 2023

Mithgroth mentioned this issue Feb 17, 2024

Adding triggers to a style adospace/reactorui-maui#209

Closed

samhouts added p/2 Work that is important, but is currently not scheduled for release has-workaround and removed p/1 Work that is important, and has been scheduled for release in this or an upcoming sprint labels Jun 18, 2024

SuthiYuvaraj mentioned this issue Sep 11, 2024

[iOS] Custom font icon is not rendered in a shell tabbar tab #24721

Closed

4 tasks

kubaflo mentioned this issue Sep 17, 2024

[iOS] Tab Selected Icon Color not changing if using Font icons - fix #22437

Merged

PureWeen closed this as completed in #22437 Sep 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IOS: Custom font icon is not rendered in a shell tabbar tab #8244

IOS: Custom font icon is not rendered in a shell tabbar tab #8244

lnaie commented Jun 22, 2022

kristinx0211 commented Jun 23, 2022

ghost commented Aug 30, 2022

legrignotin commented Oct 10, 2022

NPadrutt commented Oct 20, 2022

yurkinh commented Oct 20, 2022

NPadrutt commented Oct 22, 2022

phookycom commented Nov 9, 2022

KieranMaclagan commented Nov 16, 2022

andrei25f commented Nov 18, 2022 •

edited

Loading

Adelzu commented Nov 20, 2022

am-kh commented Jan 21, 2023

NPadrutt commented Jan 22, 2023 •

edited

Loading

rysbilinski commented Jan 25, 2023 •

edited

Loading

NPadrutt commented Jan 25, 2023

rysbilinski commented Jan 31, 2023

arahmancsd commented Mar 29, 2023

NPadrutt commented Mar 31, 2023

ewerspej commented Oct 6, 2023

arnaudaug commented Oct 6, 2023

SliemBeji-FBC commented Nov 3, 2023

zippo227 commented Dec 16, 2023

bcaceiro commented Jan 17, 2024

matt-goldman commented Feb 9, 2024 •

edited

Loading

softlion commented Mar 14, 2024 •

edited

Loading

MitchBomcanhao commented Mar 14, 2024 •

edited

Loading

softlion commented Mar 14, 2024 •

edited

Loading

MitchBomcanhao commented Mar 14, 2024

zaidmka commented Apr 9, 2024

tscholze commented Apr 14, 2024

ewerspej commented Apr 15, 2024

tscholze commented Apr 15, 2024

ewerspej commented Apr 15, 2024 •

edited

Loading

breyed commented May 25, 2024

samhouts commented Jun 18, 2024

IOS: Custom font icon is not rendered in a shell tabbar tab #8244

IOS: Custom font icon is not rendered in a shell tabbar tab #8244

Comments

lnaie commented Jun 22, 2022

Description

Steps to Reproduce

Version with bug

Last version that worked well

Affected platforms

Affected platform versions

Did you find any workaround?

Relevant log output

kristinx0211 commented Jun 23, 2022

ghost commented Aug 30, 2022

legrignotin commented Oct 10, 2022

NPadrutt commented Oct 20, 2022

yurkinh commented Oct 20, 2022

NPadrutt commented Oct 22, 2022

phookycom commented Nov 9, 2022

KieranMaclagan commented Nov 16, 2022

andrei25f commented Nov 18, 2022 • edited Loading

Adelzu commented Nov 20, 2022

am-kh commented Jan 21, 2023

NPadrutt commented Jan 22, 2023 • edited Loading

rysbilinski commented Jan 25, 2023 • edited Loading

NPadrutt commented Jan 25, 2023

rysbilinski commented Jan 31, 2023

arahmancsd commented Mar 29, 2023

NPadrutt commented Mar 31, 2023

ewerspej commented Oct 6, 2023

arnaudaug commented Oct 6, 2023

SliemBeji-FBC commented Nov 3, 2023

zippo227 commented Dec 16, 2023

bcaceiro commented Jan 17, 2024

matt-goldman commented Feb 9, 2024 • edited Loading

softlion commented Mar 14, 2024 • edited Loading

MitchBomcanhao commented Mar 14, 2024 • edited Loading

softlion commented Mar 14, 2024 • edited Loading

MitchBomcanhao commented Mar 14, 2024

zaidmka commented Apr 9, 2024

tscholze commented Apr 14, 2024

ewerspej commented Apr 15, 2024

tscholze commented Apr 15, 2024

ewerspej commented Apr 15, 2024 • edited Loading

breyed commented May 25, 2024

samhouts commented Jun 18, 2024

andrei25f commented Nov 18, 2022 •

edited

Loading

NPadrutt commented Jan 22, 2023 •

edited

Loading

rysbilinski commented Jan 25, 2023 •

edited

Loading

matt-goldman commented Feb 9, 2024 •

edited

Loading

softlion commented Mar 14, 2024 •

edited

Loading

MitchBomcanhao commented Mar 14, 2024 •

edited

Loading

softlion commented Mar 14, 2024 •

edited

Loading

ewerspej commented Apr 15, 2024 •

edited

Loading