如何在Angular Material中的图标上设置lg或2x（就像我们在Font Awesome中所做的那样）？

Question

我正在读docs for Angular Material试图理解图标。但是，我无法找到放大它们的适当方法的信息。

<mat-icon>home</mat-icon>

在FontAwesome中，我只是设置了这样的类。

<i class="fa fa-camera-retro fa-2x"></i>

如何在材料中控制它？

Answer 1

要扩大它们，只需按如下方式创建一个类（可能是.md-icon-2x？）并将其添加到mat-icon：

.md-icon-2x {
    width: 48px;
    height: 48px;
    font-size: 48px;
}

由于“材质图标”实际上是一种连字字体，因此可以使用font-size属性轻松更改，以使图标更大。