Change size of mat-icon-button

Mat-icons are font images. To change their size you should override the font size of mat-icon.
For Angular Material 8+, add the following in the components stylesheet:

.mat-icon{
    font-size:48px !important; //make it bigger, the default being 24px. 
    width:48px;                //Do not forget to adjust the 
    height:48px;               //height and/or the width, as in the demo

}

Demo

or directely in the HTML:

<mat-icon style="font-size:48px">mail</mat-icon>

---

For previous versions, you still can use ::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