fa-icon is not a known element in a Reusable Module

Question

Not sure why this is happening on a reusable Module (or what Iv'e got wrong).

ERROR Error: Uncaught (in promise): Error: Template parse errors:'fa-icon' is not a known element

FYI: fa-icon is a Font Awesome element

toolbar-fab.component.html:

<button
    mat-mini-fab
    class="mat-mini-fab mat-accent"
    routerLink="{{ fabLink }}">
  <fa-icon icon="{{ fabIcon }}"></fa-icon>
</button>

toolbar-fab.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-toolbar-fab',
  templateUrl: './toolbar-fab.component.html',
  styleUrls: ['./toolbar-fab.component.scss']
})
export class ToolbarFabComponent {
  @Input() fabIcon: string;
  @Input() fabLink: string;
}

toolbar-fab.module.ts:

import { Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { ToolbarFabComponent } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.component';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus } from '@fortawesome/free-solid-svg-icons';

library.add(faPlus);

@NgModule({
  imports: [
    CommonModule,
    FontAwesomeModule,
    RouterModule
  ],
  declarations: [
    ToolbarFabComponent
  ],
  exports: [
    ToolbarFabComponent
  ]
})

export class ToolbarFabModule {
  @Input() fabIcon: string;
  @Input() fabLink: string;
}

airframe-list.component.html

. . .
<app-toolbar-fab
  [fabIcon]="fabIcon"
  [fabLink]="fabLink">
</app-toolbar-fab>
. . .

airframe-list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-airframe-list',
  templateUrl: './airframe-list.component.html',
  styleUrls: ['./airframe-list.component.scss']
})
export class AirframeListComponent implements OnInit {

  fabIcon = 'plus';
  fabLink = '/inventory/add-airframe';

  ngOnInit() {
  }
}

airframe-list.module.ts

import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

import { MaterialModule } from '@app/shared/material.module';

import { AirframeListRoutingModule } from '@app/modules/inventory/airframes/airframe-list-routing.module';
import { AirframeListComponent } from '@app/modules/inventory/airframes/pages/airframe-list/airframe-list.component';
import { ToolbarFabModule } from '@app/shared/components/fabs/toolbar-fab/toolbar-fab.module';

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    MaterialModule,
    ToolbarFabModule,
    TranslateModule,
    AirframeListRoutingModule
  ],
  declarations: [AirframeListComponent],
})
export class AirframeListModule {
}

Appreciate you help!

Answer 1

I think this is particular to FontAwesome because my original method works as a component(Why??).

// Originally
<fa-icon icon="{{ fabIcon }}"></fa-icon>

// Change too
<fa-icon [icon]="fabIcon"></fa-icon>

Answer 2

Edit You can also import the

ShareButtonModule which already exports the FontAwesomeModule.

Original answer

Assuming you've already installed the font awesome npm package, you need to add FontAwesomeModule to your module's imports

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

@NgModule({
 //...
imports: [
     //...
   FontAwesomeModule
  ],
})
export class AppModule { }

for more information see this answer : link