colorControlNormal is not applied to MaterialToolbar's icons

Question

I want to theme my MaterialToolbar so that all its icon's colors are resolved to the value ?attr/colorOnPrimary (#FFF). I don't want to have to set android:theme directly in the XML layout file. Instead, I want to be able to override toolbarStyle attribute to control the theming (as per recommended in the Material Design page).

These are the relevant attributes of the theme that my app uses.

<style name="Base.Theme.GithubUser" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="colorOnPrimary">@color/white</item>
    <item name="toolbarStyle">@style/Widget.GithubUser.Toolbar</item> <!-- I want to control all the styles (themes) of my MaterialToolbar through this attribute -->
</style>

The style I'm using (@style/Widget.GithubUser.Toolbar) is as follows.

<style name="Widget.GithubUser.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    ...
    <item name="materialThemeOverlay">@style/ThemeOverlay.GithubUser.Toolbar</item>
</style>
<style name="ThemeOverlay.GithubUser.Toolbar" parent="">
    <item name="colorControlNormal">?attr/colorOnPrimary</item>
    <item name="colorControlHighlight">@color/material_toolbar_icon_highlight_color</item>
</style>

What I have now is: my overflow icon is indeed tinted with ?attr/colorOnPrimary but my other icon is not affected. I tried changing colorControlNormal to other color values and the overflow icon does change according to the value supplied to the attribute, but my other icon is not affected at all. Here's the display.

For reference, this is my menu.xml file that is used to inflate the toolbar menu.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_navigate_to_favourite_fragment"
        android:title="@string/show_favorites_text"
        android:icon="@drawable/drawable_favorite"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_change_settings"
        android:title="@string/change_language_text"
        app:showAsAction="never"/>
</menu>

The icon that is erroneously displayed is @drawable/drawable_favorite and it is an SVG file. Its content is as follows.

<vector android:height="24dp" android:viewportHeight="412.735"
    android:viewportWidth="412.735" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M295.706,35.522C295.706,35.522 295.706,35.522 295.706,35.522c-34.43,-0.184 -67.161,14.937 -89.339,41.273c-22.039,-26.516 -54.861,-41.68 -89.339,-41.273C52.395,35.522 0,87.917 0,152.55C0,263.31 193.306,371.456 201.143,375.636c3.162,2.113 7.286,2.113 10.449,0c7.837,-4.18 201.143,-110.759 201.143,-223.086C412.735,87.917 360.339,35.522 295.706,35.522z"/>
</vector>

What I have tried and worked: changing the path android:fillColor of the SVG to ?attr/colorControlNormal. Ideally, I don't want to tamper with the SVG fillColor property and just be able to set a tint to the drawable through colorControlNormal. Where did I get the theming wrong and how can I fix it?

Answer 1

You can use in your vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    ..
    android:tint="?attr/colorControlNormal">
       ....
</vector>

Just a tip: in your style you can use:

<style name="Widget.GithubUser.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="materialThemeOverlay">@style/ThemeOverlay.MaterialComponents.Toolbar.Primary</item>
</style>

or if you want to extend it just use:

<style name="Widget.GithubUser.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="materialThemeOverlay">@style/ThemeOverlay.GithubUser.Toolbar</item>
</style>

with:

<style name="ThemeOverlay.GithubUser.Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="colorControlHighlight">@color/material_toolbar_icon_highlight_color</item>
</style>