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

Answer 2

They do not alter the style automatically. One approach I used was to declare it as and increase the font size to match the default 40px.

<mat-card class="example-card">
  <mat-card-header>
    <i mat-card-avatar class="material-icons">accessibility</i>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
.....
</mat-card>

With this, you only have to specify font-size:40px;

.example-card {
  max-width: 400px;

  & i {
    font-size: 40px;
  }
}