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

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.

Create the class name matches to the actual function. It become more easy to remember, use and extend it.

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

.icon-3x {
    transform: scale(3);
}

The "font-size" approach only works for regular (font-based) sizing. Thus it doesn't work for svg icons, which the only way to resize that really worked for me so far was scaling it up/down.

try first using:

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

If you can't, try in the following way:

.mat-icon {
    width: 10px;
}

Good luck !!!