Angular Material : How to use `mat-icon` as `mat-card-avatar` within `mat-card-header` ?

Question

在 mat-card-header 中提供图像头像通过 mat-card-avatar 得到很好的支持.



在许多用例中，我们希望使用图标而不是图像作为卡片的“头像”。

有没有一种简单的方法可以用图标替换头像？

下面的这种作品，但不如头像图像那么好。

Answer 1

mat-card-avatar指令可以应用于任何元素，包括 <mat-icon> .您需要将样式应用于图标以获得正确的大小:

<mat-card>
  <mat-card-header>
    <mat-icon mat-card-avatar>home</mat-icon>
    ...

mat-icon.mat-card-avatar {
  width: 40px;
  height: 40px;
  font-size: 40px;
}