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>