css 如何改变角形材料上的图标大小？[复制]

uqjltbpv 于 2023-03-20 发布在其他

关注(0)|答案(7)|浏览(142)

此问题在此处已有答案：

How to change mat-icon size in Material（12个答案）
三年前关闭了。
有角材质的mat-icon标签默认大小是24 px。那么如何改变它呢？？？

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

7条答案

字体大小会影响位置。我会这样做：

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

CSS：

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

其中2可以是任何数字。2是原始大小的两倍。

由于Angular 材质使用“材质图标”字体系列，因此图标大小取决于字体大小。
因此，如果您想修改图标的大小，那么您可以在CSS文件中更改它的font-size。
例如，
对于类别：

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

对于标签：

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

为了正确 Package 字体除了设置字体大小，您还需要调整高度和宽度
如果要在全局执行此操作：

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

您还应该更改宽度和高度，使容器与字体大小匹配。
根据您的用例，mat-icon的一个很好的特性是[inline]的bool输入，将其设置为true，它将自动调整大小到包含它的元素。

创建与实际函数相匹配的类名，使其更容易记忆、使用和扩展。

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

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

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

请先尝试使用：

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

如果您不能，请尝试以下方法：

.mat-icon {
    width: 10px;
}

祝你好运！