登陆

如何在AngularMaterial上更改Mat-icon的大小?

admin 2022-11-29 4人围观 ,发现0个评论

Angular Material的mat-icon标签始终默认大小为24px。那么如何改变它... ???

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

小智.. 23

字体大小倾向于弄乱位置。我做类似的事情:

home 

CSS:

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

其中2实际上可以是任何数字。2倍于原始尺寸。



1> 小智..:

字体大小倾向于弄乱位置。我做类似的事情:

home 

CSS:

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

其中2实际上可以是任何数字。2倍于原始尺寸。



2> holydragon..:

由于Angular Material使用' Material Icons '字体系列,因此图标大小取决于font-size

因此,如果要修改图标的大小,则可以在CSS文件中更改其字体大小

例如,

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



3> 小智..:

您还应该更改宽度和高度,以使容器与字体大小匹配。

根据您的用例,mat-icon的一个好功能是[inline]的布尔输入,将其设置为true,它将自动调整大小以包含其中的元素。

请发表您的评论
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP