Problems displaying alternate Font Awesome icons when using library.add()

Question

In my Angular 11 demo application, I've setup a separate module where I wire up FontAwesome so as not to clutter my AppModule. Then Imported that module into AppModule. (used this method with Angular Material in the past and worked nicely.)

The problem I'm seeing is that I CAN use the simple syntax:

 <fa-icon icon="star"></fa-icon>

and the "solid" version of the icon displays properly in my component, however when I use the bracket syntax, binding to the icon directive to display an alternate version of the icon...

<fa-icon class="filled" [icon]="['far', 'star']"></fa-icon>

...it doesn't display. Can someone tell me what I'm doing wrong?

fa-icons.module.ts

 import { NgModule } from '@angular/core';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
// FAS ICONS
import {
  faStar as faSolidStar,
  faUserCircle as faSolidUserCircle,
  faEllipsisV as faSolidEllipsisV,
  faCog as faSolidCog,
  faPowerOff as faSolidPower,
  faPen as faSolidPen,
  faPlusCircle as faSolidPlusCircle,
  faCircle as faSolidCircle,
} from '@fortawesome/free-solid-svg-icons';
// FAR ICONS
import {
  faCircle as faRegCircle,
  faStar as faRegStar
} from '@fortawesome/free-regular-svg-icons';

@NgModule({
  exports: [
    FontAwesomeModule,
  ]
})
export class FaIconsModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(
      faRegCircle,
      faSolidCircle,
      faSolidCog,
      faSolidEllipsisV,
      faSolidPen,
      faSolidPlusCircle,
      faSolidPower,
      faRegStar,
      faSolidStar,
      faSolidUserCircle,
    );
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { FaIconsModule } from './modules/fa-icons/fa-icons.module';
import { AppComponent } from './app.component';
import { AuthorsComponent } from './components/authors/authors.component';
import { FavoriteComponent } from './components/favorite/favorite.component';
@NgModule({
  declarations: [
    AppComponent,
    AuthorsComponent,
    FavoriteComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FaIconsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}
enter code here