Is it by-design or a bug that button icon's color doesn't change with its text?

[datvm]

Lit Playground:

  <md-text-button style="--md-text-button-label-text-color: red">
    <md-icon slot="icon">send</md-icon>
    Hello
  </md-text-button>
  <md-filled-button style="--md-filled-button-label-text-color: cyan">
    <md-icon slot="icon">send</md-icon>
    Hello
  </md-filled-button>
  <md-filled-button style="--md-filled-button-label-text-color: cyan; --_icon-color: cyan;">
    <md-icon slot="icon">send</md-icon>
    Hello
  </md-filled-button>

I also noticed when hovering the button, the color revert to default and all the variables start with a _ so I assume it's private and isn't meant to be modified?

[asyncLiz]

It is by design, since label text and icons have different tokens.

--md-text-button-label-text-color: red;
--md-text-button-icon-color: red;

You're correct that the --_underscore-tokens are not meant to be used. However, they can be a good indication of what the name is. --_icon-color means --md-text-button-icon-color, --md-filled-button-icon-color, and so on.

Many tokens also have additional tokens for states like hover, pressed, focus, and disabled that need to be set, which is why the color reverts on hover.

--md-text-button-label-text-color: red;
--md-text-button-hover-label-text-color: red;
--md-text-button-focus-label-text-color: red;
--md-text-button-pressed-label-text-color: red;

You can see a list of supported tokens for each variant in the theming section of the component docs. For example, here's the link to the elevated button's tokens.

We acknowledge this is a lot, and we hope to improve things 😣

One recommendation we suggest is to use --md-sys-* tokens to help with styling instead of component tokens. For example, buttons use the primary color, so we can change the overall look without needing to override every token:

.cyan-button {
  --md-sys-color-primary: cyan;
  --md-sys-color-on-primary: black;
}

Check out How do I change the color of a button?

[datvm]

Ah clever, I didn't see that part of the docs. Will be using --md-sys-color-primary and --md-sys-color-on-primary variables from now on, thanks!