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

Here is an example using scss defined in the styles.scss to get round any encapsulation issues (defining it in a custom theme will also do the same). There is an added level of specificity to avoid using !important.

Here is the Stackblitz for it.

html

Normal button

    cloud_upload
  

Large Button

    cloud_upload
  

small button

    cloud_upload

style.scss

button[mat-icon-button]{
$large-size-button: 80px;
$large-size-icon: 48px;

    &.icon-button-large {
      width: $large-size-button;
      height: $large-size-button;
      line-height: $large-size-button;
    .mat-icon {
      font-size: $large-size-icon;
      width: $large-size-icon;
      height: $large-size-icon;
      line-height: $large-size-icon;
    }
    .mat-button-ripple {
      font-size: inherit;
      width: inherit;
      height: inherit;
      line-height: inherit;
    }
  }

  $small-size-button: 24px;
  $small-size-icon: 18px;

    &.icon-button-small {
      width: $small-size-button;
      height: $small-size-button;
      line-height: $small-size-button;
    .mat-icon {
      font-size: $small-size-icon;
      width: $small-size-icon;
      height: $small-size-icon;
      line-height: $small-size-icon;
    }
    .mat-button-ripple {
      font-size: inherit;
      width: inherit;
      height: inherit;
      line-height: inherit;
    }
  }
}