Angular can't use fontawesome in dynamic component

Question

I used this post to load dynamically some components

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

 const template =`
    <div class="btn-group">
      <button (click)="play()" class="btn btn-sm btn-outline-info">
        <fa-icon icon="play"></fa-icon>
      </button>

    </div>`;
    const tmpCmp = Component({template: template})(class {

    });
    const tmpModule = NgModule({
      imports: [CommonModule,FontAwesomeModule],
      declarations: [tmpCmp]
    })(class {
    });

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
        .then((factories) => {
            const f = factories.componentFactories[0];
            const cmpRef = f.create(this._injector, [], null, this._m);
            cmpRef.instance.name = 'B component';
            this._container.insert(cmpRef.hostView);
        })

When the template is loaded with fa-icon nothing is displayed and no error are returned.

Answer 1

If you want to add an fa class dynamically, I would use [ngClass] to show a specific fa icon because you can use interpolation:

In your component:

public faIcon:string="fa-plane"

I have hardcoded an fa-icon name here, but you can set it however you want.

in your template:

<span class="fa" [ngClass]="{faIcon}}></span>