如何在Angular Material上更改Mat-icon的大小？

Question

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

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

Answer 1

除了设置字体大小之外，为了正确包裹字体，您还需要调整高度和宽度

如果你想在全球范围内做到这一点：

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

如果您只想将大小应用于某些图标

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

在你的 HTML 模板中

.customIconSize {
    font-size: 50px;
    height: 50px ;
    width: 50px ;
}

Answer 2

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

<mat-icon class="icon-display">home</mat-icon>

CSS：

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

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

Answer 3

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

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

例如，

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

Answer 4

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

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

Answer 5

创建与实际函数匹配的类名。它变得更容易记住、使用和扩展它。

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

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