Improve error handling for missing icons (#13)

examples/example.component.html

@@ -22,3 +22,6 @@ <h3>Animation</h3>
 <p>Slide to turn up the magic.</p>
 <fa-icon [icon]="faMagic" transform="rotate-{{magicLevel}}"></fa-icon>
 <input type='range' [value]="magicLevel" (input)="magicLevel=$event.target.value"/>
+<h3>Intentionally Missing Icon</h3>
+<p>Expect to see an error on the JavaScript console, and nothing shown between these bars: |<fa-icon [icon]="faFluzzle"></fa-icon>|</p>
+

src/icon.component.ts

@@ -11,6 +11,7 @@ import {
   RotateProp,
   SizeProp,
   Transform,
+  config
 } from '@fortawesome/fontawesome';
 
 function isIconLookup(i: IconProp): i is IconLookup {
@@ -126,7 +127,19 @@ export class FaIconComponent implements OnChanges {
       symbol: this.symbol
     });
 
-    // @TODO: make sure that it doesn't break things to do html[0] here.
-    this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(renderedIcon.html[0]);
+    let html;
+    if(renderedIcon){
+      html = renderedIcon.html[0]; 
+    } else {
+      html = `<svg class="${config.replacementClass}" viewBox="0 0 448 512"></svg><!--icon not found-->`;
+      if(iconSpec == null) {
+        console.error('Could not find icon. ' +
+          `It looks like you've provided a null or undefined icon object to this component.`);
+      } else {
+        console.error(`Could not find icon: iconName=${iconSpec.iconName}, prefix=${iconSpec.prefix}`);
+      }
+    }
+
+    this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(html);
   }
 }