Passing variable into [icon] for Font Awesome not working

Question

I am using Font Awesome with Angular.

I want to loop through some data via *ngFor to create icons in a navigation bar. However, the [icon] is not accepting the values from the variable.

Component HTML

<div class="navbar-container container" [ngClass] = "expanded ? 'navbar-collapsed': ''">
  <div class="navbar-logo-container">
    <button class="logo" (click)="toggleCollapsed()">
      A
    </button>
    <div class="logo-text" *ngIf="expanded">My Site</div>
  </div>
  <ul class="navbar-nav">
    <li class="navbar-nav-item" *ngFor="let data of navData">
      <a class="navbar-nav-link" [routerLink]="[data.routeLink]">

        //works
        <fa-icon [icon]="['fas','star']"></fa-icon> 

        //Error: Type 'string' is not assignable to type 'IconProp'.
        <fa-icon [icon]="data.iconfull"></fa-icon> 

        // Type 'string' is not assignable to type 'IconProp'.
        <fa-icon [icon]="[data.iconfirst,data.iconsecond]"></fa-icon> 

        <span class="navbar-link-text" *ngIf="expanded">{{data.label}}</span>
      </a>
    </li>
  </ul>
</div>

Data

export const navbarData = [
    {
        routeLink: 'dashboard',
        iconfirst: 'fas',
        iconsecond: 'star',
        iconfull: "['fas','star']",
        label: 'Dashboard'
    }
]

Answer 1

Cannot reproduce the third scenario.

From IconProp,

export type IconProp = IconName | [IconPrefix, IconName] | IconLookup;

Hence, for the second scenario,

Specify the navbarData type as:

import {
  IconProp,
  IconPrefix,
  IconName,
} from '@fortawesome/fontawesome-svg-core';

navbarData: {
  routeLink: string;
  iconfirst: IconPrefix;
  iconsecond: IconName;
  iconfull: IconProp;
  label: string;
}[] = [
  {
    routeLink: 'dashboard',
    iconfirst: 'fas',
    iconsecond: 'star',
    iconfull: ['fas', 'star'],
    label: 'Dashboard',
  },
];

Sample Demo on StackBlitz