fa-stack renders blank, but removing wrapper renders icons

[MrSuttonmann]

I want to display an icon stack on my page, so this is what I have:

<fa-stack>
  <fa-icon [icon]="['fal', 'lock']"></fa-icon>
  <fa-icon [icon]="['fal', 'ban']"></fa-icon>
</fa-stack>

However, this renders completely empty:

If I remove the <fa-stack> wrapper, the icons render:

My implementation as I understand it is completely in-line with the documentation provided, so is this a bug or am I doing something wrong?

I'm running on Angular 8.2.3.
Font Awesome versions:

[devoto13]

stackItemSize property is required.

Somehow I've expected this issue to come up... Let's keep this issue open to implement a check for missing stackItemSize directive and also update the referenced documentation to mention that the property is required.

[MrSuttonmann]

@devoto13 Ah. That's not so obvious from the documentation, I would have assumed default to have been '1x'.

Either an error if it's missing or a default of '1x' would be useful, rather than rendering nothing.

[devoto13]

@plinkpaste Sorry about that. Can you submit a PR to mention in the documentation that the stackItemSize property is required? This will be useful until we implement the actual error checking.

PS Unfortunately we can't make this a default, because it is a separate directive, which adds extra logic for the icon component and therefore needs to be added explicitly.

[MrSuttonmann]

@devoto13 Sure, I can do that.