Warn about missing stackItemSize on fa-icon inside fa-stack

Previously we would silently drop elements without stackItemSize, which was confusing to users.

With this change we also stop making assumptions about the passed elements to prevent issues like FortAwesome#283, but in fa-stack.

Fixes FortAwesome#177

src/lib/icon/icon.component.spec.ts

@@ -159,7 +159,7 @@ describe('FaIconComponent', () => {
   it('should have title attribute, when title input is set using Angular binding syntax', () => {
     @Component({
       selector: 'fa-host',
-      template: `<fa-icon [icon]="faUser" [title]="'User John Smith'"></fa-icon> `,
+      template: ` <fa-icon [icon]="faUser" [title]="'User John Smith'"></fa-icon> `,
     })
     class HostComponent {
       faUser = faUser;
@@ -405,4 +405,23 @@ describe('FaIconComponent', () => {
     expect(queryByCss(fixture, '.fa-circle')).toBeFalsy();
     expect(spy).not.toHaveBeenCalledWith();
   });
+
+  it('should warn when stackItemSize attribute is missing on icon inside fa-stack', () => {
+    @Component({
+      selector: 'fa-host',
+      template: '<fa-stack><fa-icon [icon]="faCircle"></fa-icon></fa-stack>',
+    })
+    class HostComponent {
+      faCircle = faCircle;
+    }
+
+    const spy = spyOn(console, 'error');
+
+    const fixture = initTest(HostComponent);
+    fixture.detectChanges();
+    expect(spy).toHaveBeenCalledWith(
+      'FontAwesome: fa-icon and fa-duotone-icon elements must specify stackItemSize attribute when wrapped into ' +
+        'fa-stack. Example: <fa-icon stackItemSize="2x"></fa-icon>.',
+    );
+  });
 });

src/lib/icon/icon.component.ts

@@ -23,6 +23,7 @@ import { FaProps } from '../shared/models/props.model';
 import { faClassList } from '../shared/utils/classlist.util';
 import { faNormalizeIconSpec } from '../shared/utils/normalize-icon-spec.util';
 import { FaStackItemSizeDirective } from '../stack/stack-item-size.directive';
+import { FaStackComponent } from '../stack/stack.component';
 
 @Component({
   selector: 'fa-icon',
@@ -70,7 +71,15 @@ export class FaIconComponent implements OnChanges {
     private config: FaConfig,
     private iconLibrary: FaIconLibrary,
     @Optional() private stackItem: FaStackItemSizeDirective,
-  ) {}
+    @Optional() stack: FaStackComponent,
+  ) {
+    if (stack != null && stackItem == null) {
+      console.error(
+        'FontAwesome: fa-icon and fa-duotone-icon elements must specify stackItemSize attribute when wrapped into ' +
+          'fa-stack. Example: <fa-icon stackItemSize="2x"></fa-icon>.',
+      );
+    }
+  }
 
   ngOnChanges(changes: SimpleChanges) {
     if (this.icon == null && this.config.fallbackIcon == null) {

src/lib/stack/stack.component.ts

@@ -3,8 +3,7 @@ import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 
 @Component({
   selector: 'fa-stack',
-  // TODO: See if it is better to select fa-icon and throw if it does not have stackItemSize directive
-  template: `<ng-content select="fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]"></ng-content>`,
+  template: `<ng-content></ng-content>`,
 })
 export class FaStackComponent implements OnInit, OnChanges {
   /**