How to change size of mat-icon on Angular Material?

In order to properly wrap the font apart from setting the font size you also need to adjust the height and width

If you want to do it globally:

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

If you want to apply the size only to certain icons

.customIconSize {
    font-size: 50px;
    height: 50px ;
    width: 50px ;
}

And in your HTML template

<button mat-icon-button>
    <mat-icon class="customIconSize">visibility</mat-icon>
</button>

Since Angular Material uses 'Material Icons' Font-Family, the icon size depends on font-size.

Therefore, if you want to modify the size of the icon then you change its font-size in your CSS file.

For example,

.mat-icon {
  font-size: 50px;
}

font-size tends to mess with the position. I do something like:

<mat-icon class="icon-display">home</mat-icon>

CSS:

.icon-display {
   transform: scale(2);
}

Where the 2 can actually be any number. 2 doubles the original size.

Related