Change Hamburger Menu Icon in .NET MAUI app

Question

How can I change the hamburger menu icon in a .NET MAUI app?

I've updated the style of all my icons and I want to change the hamburger menu icon to a custom PNG.

I tried the following in Styles.xaml but that doesn't seem to be the correct property to edit.

<Style TargetType="FlyoutPage">
    <Setter Property="IconImageSource" Value="custom_menu_icon.png" />
</Style>

Answer 1

Solution for FlyoutPage

The Flyout of the FlyoutPage is of type ContentPage and thus the icon should be set there instead:

<ContentPage
    IconImageSource="custom_menu_icon.png" />
</ContentPage>

You can also define it in the Styles.xaml and assign the style to the page:

<Style TargetType="ContentPage" x:Key="FlyoutStyle">
    <Setter Property="IconImageSource" Value="custom_menu_icon.png" />
</Style>

<ContentPage
    Style="{StaticResource FlyoutStyle}" />
</ContentPage>

See also: https://learn.microsoft.com/dotnet/maui/user-interface/pages/flyoutpage#create-a-flyoutpage

This assumes that you're using the FlyoutPage and not Shell.

Solution for Shell

In case you're using Shell, you can define the style as follows:

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <!-- skipping existing setters here -->
    <Setter Property="Shell.FlyoutIcon" Value="custom_menu_icon.png" />
</Style>

See more: https://learn.microsoft.com/dotnet/maui/fundamentals/shell/flyout#flyout-icon