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;
}
try first using:
.mat-icon{
font-size: 10px;
}
If you can't, try in the following way:
.mat-icon {
width: 10px;
}
Good luck !!!
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.
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);
}
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;
}
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.
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.