*_Expected behavior_*I guess it's supposed to work normally

Actual behaviorhttps://i.gyazo.com/53befa681a1c1cce9b70fe38e3e746fb.mp4https://i.gyazo.com/a8ddf400a55cf0dae7502ee27a6abde4.png

Resources (screenshots, code snippets etc.)

<ng-template #infoComplRef let-item="item" let-info="info">
  <a role="button" class="me-1" [mdbTooltip]="info.text" [html]="false" placement="left">
    <fa-icon [icon]="info.icon" [size]="actionIconSize"></fa-icon>
  </a>
</ng-template>

<ng-template #tableActions let-item="item">
      <ng-container [ngTemplateOutlet]="infoComplRef" [ngTemplateOutletContext]="{ item: item, info: getInfoCompl(item) }">
      </ng-container>
</ng-template>

  public getInfoCompl(item: DocumentSignatureView) {
    const icon: IconProp = ['fas', 'circle-info'];
    return {
      text: "Hallo",
      icon: icon
    }
  }

EDIT: If i remove the [icon] binding from fa-icon it seems to work.

<fa-icon [icon]="['fas', 'circle-info']" [size]="actionIconSize"></fa-icon>

what's wrong with it ?

EDIT 2: binding with icon name like this works as well. it doesn't seem to be an issue with MDB.

<fa-icon [icon]="['fas', info.icon]" [size]="actionIconSize"></fa-icon>

  public getInfoCompl(item: DocumentSignatureView) {
    const icon: IconName = 'circle-info';
    return {
      text: "Hallo",
      icon: icon
    }
  }