TabbedPage doesn't change icon colour

[richaplinvs]

Description

The TabbedPage doesn't change the icon colour as the tabs are selected/unselected. The title text changes ok.

Using a PNG, instead of an Icon works too, and the colour changes in sync with the title text.

This was working on Xamarin.Forms and works on Android .NET Maui with some tweaks.

Steps to Reproduce

Create a new maui app.
Add fontawesome
Add a tabbed page with content and set the title and icon for each.
See reproduction project for details.

Link to public reproduction project repository

https://github.com/richaplinvs/reproduction-projects/tree/main/maui/TabbedSelectionIssue

Version with bug

9.0.0-preview.4.10690

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 17.4, Android Api 33

Did you find any workaround?

On Android changing the position of the toolbar:

On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

or tab colours:

UnselectedTabColor = Colors.Red;
SelectedTabColor = Colors.Orange;
BarBackgroundColor = Colors.HotPink;

On iOS use the OnAppearing/OnDisappearing in each of the tabs content page to set the colour. This requires creating a new instance of FontImageSource each time because the Color property cannot be set on it's own.

var IconImage = new FontImageSource() { FontFamily = "FontAwesomeProSolid", Glyph = FontAwesome.FontAwesomeIcons.Pencil, Size = 25, Color = Colors.Gray };         
if(selectedTab)
{
    IconImage.Color = Colors.Red;
}
IconImageSource = IconImage;

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• (Un)SelectedTabColor do not work for TabbedPage icons (FontImageSource) on iOS (#12250), similarity score: 0.84
• [iOS] Cannot control unselected text color of tabs within TabbedPage (#18775), similarity score: 0.80
• Font Icons in Shell Tabs not showing in iOS (#20866), similarity score: 0.78

Closed similar issues:

• TabBar / Tab colours not working correctly on Windows (#12386), similarity score: 0.79
• ToolbarItem Icon Coloring inconsistent (#9240), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[RoiChen001]

I can repro this issue at Android platform on the latest 17.11.0 Preview 2.1 (9.0.0-preview.4.10690 &9.0.0-preview.5.24307.10).

[mackayn]

Same problem here but using PNG's, will probably have to fix at platform level, more time gone...

[LeoJHarris]

Any update?
Found this work around for now #12250 (comment)

[kubaflo]

Hi, here's a fix that I've proposed a couple of months ago (iOS) :) #22437

On the latest net8 Android, it also works, but I didn't test it on net9

Screen.Recording.2024-09-01.at.02.11.28.mov