docs-bug(button): Change icon button size missing

[perotom]

Documentation Feedback

There is only an example to change some colours of a button (https://material.angular.io/components/button/styling) but no example of changing the size.
Especially for icon buttons, different sizes are often needed. Right now we are using something like that:

.mdc-icon-button.small {
  line-height: 18px;
  .mat-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

which is probably not the preferred way. I also tried it with:

.small {
  @include mat.icon-button-overrides((
    icon-size: 18px
  ));
}

which doesn't work as expected.

Affected documentation page

https://material.angular.io/components/button/styling

[JoolsHattey]

I was trying to do the same thing and noticed that the .material-icons (or .material-symbols-outlined) class seems to override the font-size of the .mat-mdc-icon-button, causing the overrides mixin/css properties to not work properly for the icon button. It sets the width and height, but not the font-size which causes it to look like how it is in your screenshot.

Example here

Wasn't sure if i was setting it up wrong, however that screenshot above was taken from the material docs site.

On another note, the icons should have a css variable similar to all the other components, that way allowing them to be resized both by the css property or via the mixin making things a lot simpler. This could also help with the issue above as it seems to be a css specificity issue.