mat-card-avatar not rendering properly on initial Page Load

Question

I have a simple mat-card-avatar layout that displays a rounded icon in the header of many pages in my app. I'm finding that on many pages (but not all, even though using the same type of code) are not rendering the mat-card-avatar properly on the intitial rendering pass.

I'm using this code:

<h1 fxLayout="row">
      <div mat-card-avatar class="header-icon">
        <mat-icon>home</mat-icon>
      </div>
      Welcome {{ user.userName }}
</h1>

On first render (ie. with a full browser refresh) the expected rounded icon shows up on styled as a square:

If I then navigate to another view that has the same style of layout mat-card-avatar renders correctly, as it does if then navigate back the original view:

What's really strange is that I use the same basic layout on a lot of pages, and on some this fails as described while on others it works. Most of the others that do work tend to be more complex.

I suspect this is a timing issue, but I've looked at the code and experimented with moving includes around, but none of that has any effect. Also perhaps against that scenario is that the icon is displaying the primary color which also comes from styles - so some material styling is definitely applied.

Looking at the rendered HTML in the debugger I see no difference of the HTML rendered - same HTML markup, classes and styling either way it renders which is indeed strange.

Has anybody run into this or any suggestions on what might be causing this and any workarounds?

Answer 1

Looks like the problem is the lack of a <mat-card> element in the actual component. That's why some pages were not showing the behavior while others do.

If I wrap the code above into an <mat-card> block it works. But just an empty <mat-card> on the page even makes this work.

This is ugly but it works:

<mat-card style="display: none"></mat-card>
<h1 fxLayout="row">
  <div mat-card-avatar class="header-icon">
    <mat-icon>home</mat-icon>
  </div>
  Welcome {{ user.userName }}
</h1>

You can also add this:

<mat-card style="display: none"></mat-card>

to a root component and that will solve this problem for all components below in the tree.

All of this is ugly, and probably non-designed behavior so it's best to not use mat-card-avatar outside of a mat-card but in a pinch this will work.