Cannot read property 'html' of undefined

I’m getting the follow error:

ERROR TypeError: Cannot read property 'html' of undefined
at FaIconComponent.ngOnChanges (angular-fontawesome.es5.js:106)

// @TODO: make sure that it doesn't break things to do html[0] here.
this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(renderedIcon.html[0]);

app.module

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

imports: [
    ...
    FontAwesomeModule
  ],

component.html

<fa-icon [icon]="faUser"></fa-icon>

package.json

"@angular": "^5.2.0",
"@fortawesome/angular-fontawesome": "0.1.0-3",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-free-solid": "^5.0.6",

What could I be missing?

[mlwilkerson]

I’m working on adding something to the example in the repo that will clarify how to reference icons with non-default prefixes.

As for your workaround, while that may work, it is essentially avoiding the Angular component and instead relying on our autoReplaceSvg functionality to translate <i> tags into <svg>. If you’re satisfied with that, great. But you may find it more performant (including having smaller bundle size) to import only those icons that you intend to use and add them to the library, or make them available as objects to your templates.

I’d like to leave this issue open for the moment, because I do want to fix the error handling problem you stumbled onto here.

[robmadole]

@mlwilkerson you da man 💯