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

mat-icon tag of Angular Material always has default size is 24px. So how to change it ...???

.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}

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.

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

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>

You should also change the width and height so the container matches the font-size.

Depending on your use case a good feature of the mat-icon is a bool input of [inline], set this to true and it will auto size to the element it's contained in.