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

Question

Providing an image avatar within a mat-card-header is well supported via mat-card-avatar.

There are many use-cases where we'd like to use an icon, instead of an image, as the card's "avatar".

Is there an easy way to replace the avatar with an icon?

This below sort of works, but is not quite as nice as the avatar image.

Answer 1

The mat-card-avatar directive can be applied to any element including <mat-icon>. You will need to apply style to the icon to get the size right:

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