Angular + Dynamically loaded Fontawesome Icons ERROR

Question

I'm using the official fontawesome library for Angular (8) and it seems that I can load the icons perfectly when statically naming the icon <fa-icon [icon]="faSearch"></fa-icon>, but not when dinamically loading the same property as in <fa-icon [icon]="item.icon"></fa-icon>, in which I'll get the following console error:

...
FontAwesome: Could not find icon with iconName=faSearch and prefix=fas. This warning will become a hard error in 0.6.0.
...

This happens to all icons looped, and strangely it interprets all of them as if they are coming from the "fas" (solid) library despite some belong to the "far" (regular) library, therefore the error is always displaying "prefix=fas".

I'm instancing the icons in the component as suggested by the documentation:

    import { fas, faSearch, faGlobeEurope } from "@fortawesome/free-solid-svg-icons";
    import { far, faFilePdf, faFilePowerpoint, faFileWord, faFileExcel } from "@fortawesome/free-regular-svg-icons";
    
    export class HomeComponent implements OnInit {
    
      constructor(...) { }
    
      far = far;
      fas = fas;
      faFilePdf = faFilePdf;
      faFilePowerpoint = faFilePowerpoint; 
      faFileWord = faFileWord;
      faSearch = faSearch;
      faFolder = faFolder;
      faGlobeEurope = faGlobeEurope;
      faFileExcel = faFileExcel;
...}

I've tried several options like but they don't seem to get around the issue.

Answer 1

angular-fontawesome has support for rendering icons dynamically. Check out the documentation

I adjusted it slightly to fit my needs:

    import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, Input, OnInit, ComponentRef, ComponentFactory } from '@angular/core';
    import { FaIconComponent } from '@fortawesome/angular-fontawesome';
    import { IconDefinition } from '@fortawesome/free-solid-svg-icons';

    @Component({
      selector: 'app-font-awesome-renderer',
      template: '<ng-container #host></ng-container>'
    })
    export class FontAwesomeRendererComponent implements OnInit {
      @Input() icon: IconDefinition;

      @ViewChild('host', {read: ViewContainerRef, static: true }) container: ViewContainerRef;

      constructor(private cfr: ComponentFactoryResolver) {
      }

      ngOnInit(): void {
        this.createIcon();
      }

      private createIcon(): void {
        const factory: ComponentFactory<FaIconComponent> = this.cfr.resolveComponentFactory(FaIconComponent);
        const componentRef: ComponentRef<FaIconComponent> = this.container.createComponent(factory);
        componentRef.instance.icon = this.icon;
        componentRef.instance.render();
      }
    }

Answer 2

I dynamically load my fontawesome icons like this:

parent.component.ts

import { Component } from '@angular/core';
import { faTruck } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  truckIcon = faTruck;

  constructor() {}
}

parent.component.html

<div>
    <app-children [icon]="truckIcon"></app-home-card>
</div>

child.component.ts

import { Component, Input } from '@angular/core';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';

@Component({
  selector: 'app-home-card',
  templateUrl: './home-card.component.html',
  styleUrls: ['./home-card.component.css'],
})
export class HomeCardComponent {
  @Input() icon: IconDefinition | undefined;

  constructor() {}
}

child.component.html

<div>
  <fa-icon [icon]="icon!"></fa-icon>
</div>