Angular 6 Material 对话框字体差异和 Material 图标大小修改

Question

我正在根据目前所学使用 material 设计创建示例应用程序，但我注意到 material 设计的开箱即用字体与不同的组件。对于 material 对话框中的 material 标题元素，标题以漂亮的 Roboto 字体显示，但 material 对话框内容以罗马字显示：

这是我的 html 对话框组件：

<h3 mat-dialog-title>{‌{title}}</h3>
<mat-icon color="primary">error_outline</mat-icon>
<mat-dialog-content>
    <ul>
        <li *ngFor="let error of errorMessages">
          {‌{error}}
        </li>    
      </ul>
</mat-dialog-content>

我不想创建自定义样式，而是希望直接使用与元素关联的默认样式。如果我添加

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

我的 gobal styles.css 修复了 mat-dialog-content 中的字体，但我宁愿不必那样做。

此外，图标非常小，开箱后您可以清楚地看到。有没有办法在运行时从图标库中选择更大的图标集？提前致谢！

Answer 1

看起来我从我的研究中看到的唯一方法是在全局 styles.css 中定义 body 元素，如下所示：

 body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

Angular 6 Material 对话框字体差异和 Material 图标大小修改

Angular 6 Material Dialog Font Discrepancies and Material Icon Size Modification

angular-material-6