mat-card with avatar and without subtitle lays out poorly

[bdirito]

Reproduction

This is the ng12 example of a card as via https://stackblitz.com/angular/lmmqvpmkkroj?file=src%2Fapp%2Fcard-fancy-example.ts

If we edit card-fancy-example.html and delete the mat-card-subtitle we get:

https://stackblitz.com/edit/angular-nwq55p?file=src/app/card-fancy-example.html

I would have expected the title to shift down a bit and for there to be a bit more bottom padding on the mat-card-header. Perhaps something like

That image comes from adding

mat-card-title {
  margin-top: 9px;
  margin-bottom: 18px !important;
}

to card-fancy-example.css. The numbers used are simply ones that looked ok in this example.
https://stackblitz.com/edit/angular-cr9sxw?file=src/app/card-fancy-example.css

Environment

• Angular: 12.0.1
• CDK/Material: 12.01
• Browser(s): Chrome 88.0.4324.150 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.04