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-button has just hardcoded 40px/40px size.

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

Answer 1

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

---

For Angular Material 8+, add the following in the components stylesheet:

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

Demo

---

For previous versions, add ::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 2

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.