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

Question

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

Answer 1

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.

Answer 2

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