bug(icon-button): The backwards compatability mixin for color variants is not affecting icon buttons

[cuzo989874]

Documentation Feedback

In the previous version (Angular/Material 17), the color of the mat-icon-button could be customized. However, I am currently unable to access the code or obtain the correct demo version, even though the parameter still exists on the API page.

Affected documentation page

https://material.angular.io/components/button/overview#button-overview

[amysorto]

Thanks for pointing this out! In M3, you need to use a backwards compatability mixin to get that same code to work. See our docs for how to use it. Let me know if that solves this issue for you!

I'll update this issue to track removing the color inputs for the component specific documentation.

[cuzo989874]

Thanks for pointing this out! In M3, you need to use a backwards compatability mixin to get that same code to work. See our docs for how to use it. Let me know if that solves this issue for you!

I'll update this issue to track removing the color inputs for the component specific documentation.

I understand that we should use the backwards compatibility mixin for setting the theme. However, the issue is that the mat-icon-button appears to be an exception; its color cannot be set. You can identify this problem by looking through the docs, specifically in the icon section.

Honesty, I already setup M3 system with custom theme in my workspace, but only mat-icon-button still cannot be setting color and I found that official demo cannot either, that's why I coming.

[banut1]

Check this: #29151.

Starting from that answer, here's what I did and works well:

For a primary icon button, I defined:

 .mat-mdc-icon-button.primary:not(:disabled) {
  @include mat.icon-color($theme, $color-variant: primary);
  @include mat.icon-button-color($theme);
}

For a warn one, I defined a whole warn theme and similarly to the above, a class .warn. It works well and does not use the m2 color attributes at all, neither the backwards compatibility mixin.

Usage:
<button mat-icon-button class="primary">...</button>

Hope it helps!

[midthun]

Not sure if 100% related, but I think it is:

Found it a bit confusing in the API section when trying to style my mat-selection-list: https://material.angular.io/components/list/api

The color does nothing when you add it to options or lists, but it is there in the documentation. Also, it only accepts m2 colors, like primary, accent etc, but still does nothing when used in m3.

[amysorto]

@cuzo989874 Thanks for pointing out that the icon-button variant is missing. I took a closer look and yes that example does have the backwards compatability mixin but it isn't affecting icon buttons. I'll change the title for this issue accordingly.

In the meantime, you can add custom styles for your icon buttons if necessary or do what @banut1 suggested. The CSS variable --mat-icon-color is how you can change the color. For example if you want to change the warn icon buttons you can do the following:

.mdc-icon-button.mat-warn {
  --mat-icon-color: $your-color;
}

Note: You can also directly access the color roles from the theme itself with mat.get-theme-color. So in the example above you can do --mat-icon-color: mat.get-theme-color($your-theme, $error);

@midthun I agree, we are updating our docs for the different components page to make this more clear. Thanks!

[cuzo989874]

Here is my temporary solution. If anyone has the same situation, you can follow this:

:root {
    .mat-primary {
        --mdc-icon-button-icon-color: #{variables.$primary-color};
        --mat-icon-button-state-layer-color: #{map.get(palette.$primary, 70)};
    }
    .mat-accent {
        --mdc-icon-button-icon-color: #{variables.$accent-color};
        --mat-icon-button-state-layer-color: #{map.get(palette.$tertiary, 70)};
    }
    .mat-warn {
        --mdc-icon-button-icon-color: #{variables.$error-color};
        --mat-icon-button-state-layer-color: #{map.get(map.get(palette.$primary, error), 70)};
    }
}

[crisbeto]

This was fixed by #29433.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}