如何改变角度材料上垫子图标的尺寸？

角度材质的垫子图标标签总是默认大小是24px。那么如何改变它... ? ? ？

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

189359 次浏览

小开

最佳答案

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.

小开

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>

小开

try first using:

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

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

.mat-icon {
width: 10px;
}

Good luck !!!