Improve error handling for missing icons (FortAwesome#13)

Author: mlwilkerson

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);
  }
 }