Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[mdc-icon-button] Icon button does not set colors based on theme values properly

See original GitHub issue

Bug report

Icon button does not set colors based on theme values properly. Default color doesn’t change based on theme color palette and disabled color is always set to text-disabled-on-light which is not the best option for a dark theme (screenshot attached).

Steps to reproduce

  1. Create a custom dark theme:

For example:

@use "@material/theme" with (
    // Background
  $background: #212121,

  // Primary
  $primary: #3d74ff,
  $on-primary: #000,

  // Secondary
  $secondary: #00b8c7,
  $on-secondary: #000,

  // Surface
  $surface: #212121,
  $on-surface: #fff,

  // Status
  $error: #d91e18,
  $on-error: #fff
  1. Take a look at mdc-icon-button default and disabled states.
  2. Default color remains full black and disabled color is too dark which makes the component not properly visible for users.

Actual behavior

Colors are not updated based on theme color palette.

Expected behavior

Colors should be set based on theme color palette.



Possible solution

The above comments are just suggestions based on my understanding of the component implementation but i’m not fully aware of the standard and guidelines defined for this components so please ignore this if it doesn’t apply.


Currently i’m using these styles to achieve what i wanted in case it adds some info to the bug:

@use "@material/theme" as mdc-theme;
@use "@material/icon-button/mixins" as mdc-icon-button-mixins;

@mixin base_ () {

@mixin disabled_ () {
  $text-disabled-color: if(mdc-theme.contrast-tone(mdc-theme.$surface) == "dark", text-disabled-on-light, text-disabled-on-dark);

  @include mdc-icon-button-mixins.disabled-ink-color($text-disabled-color);

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

asyncLizcommented, Mar 13, 2020

We definitely think this could be addressed. Adding it to our backlog to investigate

kintz09commented, Sep 16, 2021

Is this still issue still expected to be fixed? I discovered the same issue today, but noticed this issue had been reported back in 2020.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Buttons - Material Design
Buttons allow users to take actions with a single tap. ... mdc-button__label element is required in order for the trailing icon to be...
Read more >
Icon Buttons - Material Components for the Web
The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button...
Read more >
Material Design icon button doesn't work properly
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp? 1 · How should I change the color of...
Read more >
Material Theming with MDC: Color - Medium
Material Theming is a way to customize Material Components to align with your brand. A Material theme includes color, typography and shape ...
Read more >
material/fab - Floating action buttons - npm
The Material Components for the web floating action button component. ... Note: IE 11 will not center the icon properly if there is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found