Cannot use ng-container *ngFor inside a fa-layer

[pauldaustin]

What I would like to do is have be able to define icons with layers, text etc using objects in the typescript code. I can then pass these to a custom component that uses fa-layers to render them. This way I don't have to create a component for each layered icon or duplicate code across the app.

To achieve this I was going to loop through the layers in a ng-container and then use an ngSwitch to render a fa-icon, fa-counter etc.

Unfortunately the ng-container is ignored and no content is returned.

<fa-layers>
  <ng-container *ngFor="let layer of layers">
    <fa-icon [icon]="layer.icon" [style]="layer.styles" [transform]="layer.transform" [mask]="layer.mask">
    </fa-icon>
  </ng-container>
</fa-layers>

A simple loop on a fa-icon works but that won't allow full layering with the different options.

<fa-layers>
  <fa-icon *ngFor="let layer of layers" [icon]="layer.icon" [style]="layer.styles" [transform]="layer.transform"
    [mask]="layer.mask">
  </fa-icon>
</fa-layers>

This is is an example of my current icon definitions without the typing. Which would be of the form type: 'icon' (default) etc.

[
    { icon: 'file', styles: { color: 'var(--documentRevision)' } },
    {
      icon: 'history',
      styles: { color: 'white' },
      transform: 'shrink-6, down-2',
    }
  ]