angular-material-6 - Angular 6 Material Dialog 字体差异和 Material Icon 大小修改

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;
}

我的全局 style.css 修复了 mat-dialog-content 中的字体，但我不想这样做。

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

Answer 1

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

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