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

Posted 2023-02-22

【中文标题】如何更改 Angular Material 上 mat-icon 的大小？ [复制]

【英文标题】：How to change size of mat-icon on Angular Material? [duplicate]

【发布时间】：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)

查看答案***.com/questions/43887701/…

【参考方案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;

祝你好运！！！