Change IconColor to StaticRessource or DynamicRessource

[joetuescher]

It would be nice to be able to change the IconColor based on the AppTheme.

I would like to it like this: `

`

Or am i missing anything? Can this already be done?

[AathifMahir]

It would be nice to be able to change the IconColor based on the AppTheme.

I would like to it like this: `

`

Or am i missing anything? Can this already be done?

Of course, you can use dynamic or static resources for icon color with app theme binding. May I know what's the output of your code is? Doesn't Icon Color Changes On Theme Changes?

Edit: are you using latest version of MauiIcon which v2.2.5?

[joetuescher]

I updated to the newest version and it still does not work...

PS: Im relative new to MAUI, so maybe it's somehow my fault... :D

Edit: The Icon is on the left side of "My Plans" its nearly visible.

[AathifMahir]

I updated to the newest version and it still does not work...

PS: Im relative new to MAUI, so maybe it's somehow my fault... :D

Edit: The Icon is on the left side of "My Plans" its nearly visible.

No worries, I'll test your usage and get back to you

[AathifMahir]

I Found Your Issue, The ShellContent Overrides IconColor With it's Foreground Property that Set in Style.xaml in Resources Folder, You can change by Adjusting the Styles or Overriding those Properties in Shell Page like Below Example

<Shell
    x:Class="MauiIcons.Sample.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiIcons.Sample"
    Shell.TabBarForegroundColor="{AppThemeBinding Dark={DynamicResource White}, Light={DynamicResource Primary}}"
    Shell.FlyoutBehavior="Disabled">

</Shell>

Style.xaml

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
    <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />
    <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
    <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
    <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
    <Setter Property="Shell.NavBarHasShadow" Value="False" />

    <!-- Set Below Properties to your desired color or resource -->
    <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
</Style>

[joetuescher]

I tried it with TabBars and this works perfectly. But i got a flyout Menu like this:

<Shell 
    ...
    xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"
    BackgroundColor="{AppThemeBinding Dark=Black, Light=White}"
    FlyoutBackgroundColor="{AppThemeBinding Dark=Black, Light=White}"
    ForegroundColor="{AppThemeBinding Dark=White, Light=Black}"
    Shell.FlyoutBehavior="Flyout">
    <ShellContent Title="My Plans" 
        Icon="{mi:Material Icon=CalendarViewMonth}"  
        ContentTemplate="{DataTemplate views:MyPlansPage}"/>
    <ShellContent Title="Profile" 
        Icon="{mi:Material Icon=SupervisedUserCircle, IconColor={AppThemeBinding Light={DynamicResource Black}, Dark={DynamicResource White}}}" 
        ContentTemplate="{DataTemplate views:ProfilePage}"/>
</Shell>

And this does not work, the FlyoutBackgroundColor will be set correctly, also the ForegroundColor works, here is how it looks:

I tried it with setting the IconColor in the ShellContent Tag and also without setting it there, as you can see, both versions doesn't work... I also removed all Styles setted for the TargetType="Shell"...

[AathifMahir]

@joetuescher Icon color on ShellContent won't work whatsoever, by Default Maui Itself Overrides the Image source aka Icon property of ShellContent. This isn't a bug with Maui or MauiIcons.

When it comes to fly out, you seems to be missing something or removal of styles for shell could cause this

I'll close this issue for now, if you any further questions, feel free to comment on this