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

In your component scss file (assuming sass):

.mat-icon-button.large {

    width: 48px;
    height: 48px;
    line-height: 48px;

    .mat-icon {
      font-size: 48px;
      width: 48px;
      height: 48px;
      line-height: 48px;
    }
  }

You can change to whatever sizes you want for both the button and the icon. If they are both set to 48 that will not have any spacing around the icon. You may want to increase the button size to something like 64.

In your html:

<button mat-icon-button class="large"><mat-icon>chat</mat-icon></button>

Answer 2

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.
}