如何更改 Angular Material 上 mat-icon 的大小？ [复制]答案

【问题标题】：How to change size of mat-icon on Angular Material? [duplicate]如何更改 Angular Material 上 mat-icon 的大小？ [复制]
【发布时间】：2019-04-18 03:41:12
【问题描述】：

Angular Material 的 mat-icon 标签总是默认大小为 24px。那怎么改呢……？？？

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

【问题讨论】：

font-size:40px;
或transform:scale(1.x)
查看答案stackoverflow.com/questions/43887701/…

标签： javascript html css angular

【解决方案1】：

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

因此，如果您想修改图标的大小，请在 CSS 文件中更改其 font-size。

例如，

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

【讨论】：

这样图标占用的空间不会增加/减少，而是保持不变，这可能是个问题
你也必须设置width和height。
在将宽度和高度设置为小于 24px 的值后，它看起来很尴尬。我可以通过调整 line height 属性来修复它。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

“字体大小”方法仅适用于常规（基于字体）大小。因此它不适用于 svg 图标，到目前为止，唯一对我有用的调整大小的方法是放大/缩小它。

【讨论】：

【解决方案4】：

font-size 往往会弄乱位置。我会这样做：

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

CSS：

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

其中 2 实际上可以是任意数字。 2 是原始大小的两倍。

【讨论】：

这必须是选择的答案，使用此选项图标占用的空间正确增加。如果我们只使用 font-size 图标占用的空间不会增加/减少
我是第 70 位...对不起
在我的情况下，字体大小没有按预期工作。图标显示在一个点，我的鼠标单击事件在另一个点上起作用。因此，在这种情况下，变换是一个更好的主意。
查看@Shakur 的后一个答案。

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

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

.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>

【讨论】：

这应该是正确答案
谢谢@Shakur，是的，如果没有width 调整，图标将不会居中。
图标默认样式为 { font-size: 24px;宽度：24px；高度：24px }。所以我们需要同时调整宽度和高度。
我已经用你的 cmets 更新了答案
这应该是正确的答案。

【解决方案7】：

首先尝试使用：

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

如果你不能，尝试以下方式：

.mat-icon {
    width: 10px;
}

祝你好运！！！

【讨论】：