我正在尝试将图标的名称直接传递给我的html。
它对离子图标工作得很好，但对fontAwesome图标不起作用。

tabs.page.ts：

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

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})

export class TabsPage {

  public pages = [
    { title: 'Catalog', url: 'home', icon: 'home', type: 'ion' },
    { title: 'Account', url: '/about', icon: 'square', type: 'fa' },
    { title: 'Contact', url: '/contact', icon: 'square', type: 'fa' },
    { title: 'Gallery', url: '/gallery', icon: 'square', type: 'fa' },
    { title: 'Setting', url: '/setting', icon: 'settings', type: 'ion',
 children: [
        { title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
        { title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
        { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
      ] }
  ];

  
  constructor() {}

}

tabs.page.html：

<ion-menu-toggle *ngIf="p.url"> 
    <ion-item>
      <ion-icon [name]="p.icon" slot="start" *ngIf="p.type === 'ion'"></ion-icon>
      <fa-icon [icon]="['fas', 'p.icon']" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>        
      <ion-label>
        {{ p.title }}
      </ion-label>
    </ion-item>
  </ion-menu-toggle>

我得到这个错误：

error TS2322: Type '"p.icon"' is not assignable to type 'IconName'.

我尝试更改代码，但出现以下错误：

<fa-icon [icon]="p.icon" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>

错误TS2322：类型“string”不能分配给类型“IconProp”。

<fa-icon [icon]="['fas', p.icon]" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>

错误TS2322：类型“string”不能分配给类型“IconName”。
直接声明时图标显示完美：

<fa-icon [icon]="['fas', 'cube']" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>

有人知道怎么修吗？