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

【问题标题】：How to set lg or 2x on icons in Angular Material (like we do in Font Awesome)?如何在 Angular Material 中的图标上设置 lg 或 2x（就像我们在 Font Awesome 中所做的那样）？
【发布时间】：2018-05-30 14:36:07
【问题描述】：

我正在阅读docs for Angular Material 试图理解这些图标。不过，我找不到有关放大它们的适当方式的信息。

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

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

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

Material应该如何控制？

【问题讨论】：

Change the icon size of Material Design icon的可能重复
github.com/angular/material2/issues/4422
@Jota.Toledo 我看不出这是重复的。我正在使用 Angular Material，它提供了一种不同的 Angular-ish 语法。它显示在文档的链接中。（为了让不点击链接的用户清楚起见，也许我应该发布一份副本。）
@Jota.Toledo 我在 GitHub 上阅读了喜欢的文章（以及那里的所有相关链接）。我认为这不是正确的道路，因为它似乎过于复杂。通常，当遵循应有的语法时，编码是流畅且容易的（否则，这通常意味着我们做错了什么）。放大图标是一个非常基本的操作。（例如，通过向图标添加属性 color="primary" 来设置颜色。）
github.com/angular/material2/blob/master/src/lib/icon/icon.scss 默认尺寸固定为 24px，您可以通过定义自己的尺寸类集来修改它，如 dup 和 github 中所述。为什么你会说这是一种不容易的方法？

标签： html angular icons angular-material font-awesome

【解决方案1】：

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

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

由于 Material Icons 实际上是一种连字字体，可以通过font-size 属性轻松更改它以使图标变大。

【讨论】：