如何更改 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;
}

原文由 Nguyễn Phúc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 Angular Material 使用 ’ Material Icons ‘ Font-Family，因此图标大小取决于 font-size 。

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

例如，

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

原文由 holydragon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

如果你想在全球范围内这样做：

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

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

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

在您的 HTML 模板中

<button mat-icon-button>
    <mat-icon class="customIconSize">visibility</mat-icon>
</button>

原文由 cksrc 发布，翻译遵循 CC BY-SA 4.0 许可协议