Skip to content

Custom Shell FlyoutIcon is all white #20682

@JonPetitta

Description

@JonPetitta

Description

When setting a custom FlyoutIcon it gets converted to all white. When using the builtin hamburger its color properly reflects what is set by the styling.

If you have a white background color set, then the icon, when set, is all white as well, making it invisible. doesn't matter if you use a png or a svg for the icon.

I understand that all svgs are converted to png during the build process. It seems when FlyoutIcon is set, it just whites out the image. Not sure how this is meant to work with styling since you can change the color via an attribute/property.

Though this seems to work as expected when using the default/built in hamburger icon.

I would think that to properly support styling for icons (as is with the default hamburger), you need to support the svg file format and not convert them to png's.

Steps to Reproduce

1: Create new Maui App
2: Get any png or svg, like from icons8 or something, add image to Resources/Images
3: set Shell.FlyoutBehavior to 'Flyout' in AppShell.xaml
4: comment out the Shell section in Styles.xaml (which I hope gets fixed someday)
5: Create FlyoutItem entry in AppShell.xaml set its Icon property to the file from step 2
6: Add Image element to mainpage.xmal and set to file from step 2

Run app on android, notice FlyoutItem icon shows as expected, as well as the xaml image

Stop app

6: Set shell FlyoutIcon to file from step 2

Run app on android, notice the Flyout icon is all white and the FlyoutItem icon is also all white, xmal image shows as expected

Link to public reproduction project repository

https://github.com/JonPetitta/MauiApp2

Version with bug

8.0.3 GA

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

Did you find any workaround?

No response

Relevant log output

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-controls-shellShell Navigation, Routes, Tabs, Flyoutpartner/syncfusionIssues / PR's with Syncfusion collaborationplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions