Symmetric API for the Angular Material Icon Button

[fireflysemantics]

For all the buttons in Angular Material we can delegate to the helper mixins in MCW, except for the icon button.

It has a helper function, but the API is not symmetric with respect to the API offered for the other button types. Created a separate issue for this within the Angular Material repository that elaborates further..

Ideally we would be able to delegate to @material/icon-button/icon-button-theme for color extension mixins like this one:

/**
 * The MDC API is not symmetric with respect to the other button theme helper mixins
 */
//@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
@use './el-x-icon-button-theme' as el-x-icon-button-theme; 
@use '../common/' as *;

@mixin icon-variant($color-class, $color) {
  &.#{ $color-class } {
    @include el-x-icon-button-theme.theme((
      icon-color: $color
    ));
    color: var(--mdc-icon-button-icon-color);
    @include ripple-color($color);
  }
}

[fireflysemantics]

Wrote an article illustrating the approach I'm using to extend the Angular Material button components. I'm hoping in the future I'll be able to delegate the work done by the ripple-color mixin and the el-x-icon-button-theme mixin to corresponding mixins in Material Components Web.

https://fireflysemantics.medium.com/theming-pattern-for-extending-angular-material-components-f0c61b8d355