Relax fa-layers restrictions on projected elements

Silently dropping unsupported elements seems to create more pain then it generates benefit: it is confusing and does not support all use cases (for example fa-icon inside ng-container). It is better to relax it and assume that users only provide supported elements.

Fixes #283

src/lib/layers/layers.component.spec.ts

@@ -147,4 +147,25 @@ describe('FaLayersComponent', () => {
     fixture.detectChanges();
     expect(queryByCss(fixture, 'fa-duotone-icon')).toBeTruthy();
   });
+
+  it('should support icons wrapped into ng-container', () => {
+    @Component({
+      selector: 'fa-host',
+      template: `
+        <fa-layers>
+          <ng-container>
+            <fa-icon [icon]="faUser"></fa-icon>
+            <fa-layers-text [content]="'Dummy'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
+          </ng-container>
+        </fa-layers>
+      `,
+    })
+    class HostComponent {
+      faUser = faUser;
+    }
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(queryByCss(fixture, 'fa-icon')).toBeTruthy();
+  });
 });

src/lib/layers/layers.component.ts

@@ -1,12 +1,13 @@
 import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { FaConfig } from '../config';
+
 /**
  * Fontawesome layers.
  */
 @Component({
   selector: 'fa-layers',
-  template: `<ng-content select="fa-icon, fa-duotone-icon, fa-layers-text, fa-layers-counter"></ng-content>`,
+  template: `<ng-content></ng-content>`,
 })
 export class FaLayersComponent implements OnInit, OnChanges {
   @Input() size?: SizeProp;