Skip to content

Unable to set flyout burger menu icon color in Shell when customized with FontImageSource  #24857

@rezamohamed

Description

@rezamohamed

Description

I want to use a custom icon and color for the Shell Flyout hamburger menu. I have the following code:

<Shell
...
  BackgroundColor="{StaticResource Background}"
  FlyoutBackground="{StaticResource Background}"
  FlyoutBackdrop="{StaticResource PrimaryLighter}"
  FlyoutIcon="{StaticResource HamburgerMenu}"
  Shell.ForegroundColor="Red">

  <Shell.Resources>
    <ResourceDictionary>
      <FontImageSource x:Key="HamburgerMenu" FontFamily="FontIcons" Glyph="{StaticResource BurgerMenu}" Size="20"
                       Color="{StaticResource Primary}">
      </FontImageSource>
    </ResourceDictionary>
  </Shell.Resources>

The color of the menu is my static resource - Primary color, on iOS it displays the color just fine. I added the Foreground color Red to test - but picks up the FontImgeSource color in iOS which is fine.

image

But on Android, the color only shows as White. I've tried a few different ways to set the color, but it doesn't seem to change. This is reported as a bug for other versions of Maui for some time now is what searches are showing.

image

Further, I cannot change the color of the back button when navigating to a page either. Works fine in iOS, but stays white in Android.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyPage.Views.Info.MyPage"
             BackgroundColor="{StaticResource Background}"
             Title="MyPage">

  <ContentPage.Resources>
    <ResourceDictionary>
      <FontImageSource x:Key="BackButton" FontFamily="FontIcons"
                       Glyph="{StaticResource LeftArrow}"
                       Size="20"
                       Color="{StaticResource Primary}"></FontImageSource>
    </ResourceDictionary>
  </ContentPage.Resources>

  <Shell.BackButtonBehavior>
    <BackButtonBehavior IconOverride="{StaticResource BackButton}"></BackButtonBehavior>
  </Shell.BackButtonBehavior>

Steps to Reproduce

  1. Create a Maui App
  2. Change the standard hamburget menu icon to a FontImageSource Icon
  3. Try to change the color of that Icon

Link to public reproduction project repository

No response

Version with bug

8.0.90 SR9

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 14.0

Did you find any workaround?

No response

Relevant log output

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions