How to pass icon name from array to

I´m trying to dinamically pass icon´s name to my html.

It´s working fine for ion-icons, but doesn't work for fontAwesome icons.

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>


I getting this error:

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


I tried to change my code, but I'm getting these errors:

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

error TS2322: Type 'string' is not assignable to type 'IconProp'.
​

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

error TS2322: Type 'string' is not assignable to type 'IconName'.
​

The icon is showed perfectly when declared directly:

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


Somebody knows how to fix it?

Continue reading...