Change size of mat-icon-button

Question

How can I change mat-icon-button size? My icon has 24px now and I would like to increase that value to 48px. I use mat-icon as a button content. I also noticed that mat-icon-but

Answer 1

I know this question was posted a while back, but I like using the zoom CSS property, because it is a very simple and elegant solution and avoids several caveats.

Make sure the specificity of the selector is enough to override Angular Material's styles. This helps to avoid using the !important override, which is generally frowned upon.

button[mat-icon-button].mat-icon-button.large-icon-button {
  zoom: 1.5;  // NOTE: You may need to adjust this value to achieve exactly 48px.
}