Mat-icon 在 Angular 中与 font-awesome 一起使用时更小答案

【问题标题】：Mat-icon smaller when used with font-awesome in AngularMat-icon 在 Angular 中与 font-awesome 一起使用时更小
【发布时间】：2019-04-01 16:55:31
【问题描述】：

我正在尝试为我的<mat-icon> 使用 Font-awesome，但它们看起来更小了。

<li>
  <mat-icon>remove_red_eye</mat-icon>
  <mat-icon>brush</mat-icon>
  <mat-icon fontSet="fa" fontIcon="fa-filter"></mat-icon>
</li>

我在angular.json 的styles 数组中添加了“node_modules/font-awesome/scss/font-awesome.scss”（从 npm 下载）并且......仅此而已。我很确定这是因为我不使用matIconRegistry，但我没有发现它是如何“导入”一整套图标（所有字体真棒图标）的。

感谢您的帮助

【问题讨论】：

标签： angular icons angular-material font-awesome

【解决方案1】：

这对我有用！

<mat-icon fontSet="fa" style="font-size: 2em; color: green;" fontIcon="fa-file-csv"></mat-icon>

【讨论】：

【解决方案2】：

添加css类

.mat-icon {
    font-size:24px; //or desired size
}

这是因为 mat-icon 默认通过 css 样式 width: 24px; height: 24px; 定义图标的大小。

使用 font-awesome 时，font-awesome 图标（字体）被注入到宽高为 24px 的 mat-icon 组件中，但 font-awesome 的实际 font-size 可能更小。因此，添加 font-size:24px 使 font-awesome 图标的宽度和高度与 mat-icon 的宽度和高度相匹配。

【讨论】：