Ion-avatar in ion-toolbar problem

Hi All,

the ion-avatar is not working properly when put into an ion-toolbar.

The following code is working so far, but as soon as I am removing the *ngIf=“data” from ion-img the image is not shown anymore. Since the ngIf is not actually required here this behavior is already strange.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar id="toolbar-avatar" style="width: 25px; height: 25px;">
        <ion-img *ngIf="data" src="{{data.avatarImg}}"></ion-img>
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="myMethod()">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

What I actually want to achieve is to have two ion-avatar and by a condition its decided which one will be shown.
For that I am using this code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <ion-avatar *ngIf="condition" id="toolbar-avatar" style="width: 25px; height: 25px;">
        <ion-img *ngIf="data" src="{{data.avatarImg}}"></ion-img>
      </ion-avatar>
      <ion-avatar *ngIf="!condition" id="toolbar-avatar" style="width: 25px; height: 25px;" [style.background]="data.avatarBackgroundColor">
           {{data.someShortText}}
      </ion-avatar>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="myMethod()">
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

For this example it doesnt matter if it makes sense to you to have this approach with these two avatars.
Anyway, as soon as I add the ngIf to the ion-avatar the thing breaks and none of the avatars is shown plus the entire UI behaves in a strange way.
I am using the same approach in some other codes parts and its working just fine, this problem just comes up as soon as its used within the ion-header/ion-toolbar.
Anyone an info what is going on here or a hint about how to accomplish what I am aiming for?

One last thing:
In the Ionic component docs about the ion-avatar the following code snippet is shown:

<ion-avatar>  
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>

Why is always a usual img used in the docs instead of an ion-img ?

Thanks in advance for everything.
Cheers