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

  <button md-mini-fab (click)="add()" 
    style="cursor: pointer;textdecoration:none;height:30px;width:30px">                                               
    <md-icon style="margin:-4px 1px;color:white;font-size: 16px;">add</md-icon>
    </button>

above code working perfectly in angular2

Answer 2

Override the font size of mat-icon using either of the options. (I changed md- to mat- for the newest AM version)

---

::ng-deep to reach that class deep in the host. The width and the height should be also set to adjust the backdrop size proportionally.

HTML:

<button mat-button>    
  <mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>

CSS

::ng-deep .mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Check out the Demo

---

Or, if you avoid ::ng-deep, use ViewEncapsulation.None (but use sparingly):

Class:

import {ViewEncapsulation} from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None
})

Then you can style directly from the component stylesheet.

CSS:

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

Demo

---

Or style it from the main stylesheet, styles.css:

styles.css

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

Demo

---

And last, but not the least solution, styling can be done inline:

HTML:

<button mat-button>    
  <mat-icon style="
    height:48px !important;
    width:48px !important;
    font-size:48px !important;" class="material-icons">play_circle_filled</mat-icon>
</button>

Demo

Answer 3

With Angular 8, resizing worked for me with:

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   line-height: 24px !important;

   .mat-icon {
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
   }
   .material-icons {
      font-size: 16px !important;
   }
}

No ::ng-deep required.

Answer 4

Working perfectly in Angular 9:

<button mat-mini-fab>
  <mat-icon>search</mat-icon>
</button>

docs: https://material.angular.io/components/button/examples

Answer 5

Many answers unnecessarily complicated... Here is what worked for me using Angular 9:

Assuming you want your icon to be 40x40:

HTML:

<button mat-icon-button>
    <mat-icon id="add">add</mat-icon>
</button>

CSS:

.mat-icon {
    height: 40px;
    width: 40px;
    font-size: 40px;
    line-height: 40px; // DO NOT FORGET IT !
}

No need ng-deep or !important.

Answer 6

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

<h3>Normal button</h3>
<button mat-icon-button color="warn" aria-label="normal button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

<h3>Large Button</h3>
<button mat-icon-button color="warn" class="icon-button-large" aria-label="small button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

<h3>small button</h3>
<button mat-icon-button color="warn" class="icon-button-small" aria-label="large icon">
    <mat-icon>cloud_upload</mat-icon>
</button>

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