icon color is lost after click

[tve]

I'm having some difficulties with assigning a color to an icon button: it works initially but then the color is lost. What I'm doing is in the parent container setting:

  --md-icon-button-icon-color: var(--md-sys-color-primary);

On page load the "refresh" md-icon-button has the primary orange color:

But after clicking it it reverts to the grey on-surface-variant color:

Except that I now see that when it loses focus the orange comes back. Is this "loss of color" after click before loss of focus intentional?

Repro link below. It loads all of the material design icons so seems to need a refresh (upper right hand corner). Ignore the errors about custom components, they're harmless as far as I can tell.

[asyncliz]

There are often "stateful" color tokens like hover, focus, and pressed that may need to be set for a component. See Why does my color change on hover/focus/pressed? in our FAQ for details.

For icon button's tokens, that'd be the following:

md-icon-button.orange {
  --md-icon-button-icon-color: orange;
  --md-icon-button-hover-icon-color: orange;
  --md-icon-button-focus-icon-color: orange;
  --md-icon-button-pressed-icon-color: orange;
}

This gets to be a lot when they're all the same color. We mention in How do I change the color of a button? that you can also set the system color all of the stateful tokens map to.

For icon button, that's on-surface-variant.

md-icon-button.orange {
  --md-sys-color-on-surface-variant: orange;
}

We're working on improving how tokens can be used and customized, so apologies for the confusion!