Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Cannot use FontAwesome
posted

Dear support

We use Ignite for Angular 2019.2.

We also have a commercial license for FontAwesome PRO.

I am not able to use the icons, which I can with plain Angular.

This is not working at all for me:

<igx-navbar title="PROJECT" [isActionButtonVisible]="true">
<!--
<igx-icon
*ngFor="let item of menuItems"
fontSet="item.active ? item.iconSelected.prefix : item.iconDefault.prefix"
name="item.active ? item.iconSelected.iconName : item.iconDefault.iconName"
[routerLink]="item.route"
(click)="changeActiveState(item)"
>
</igx-icon>
-->

<igx-action-icon>
  <!-- NONE OF THESE WORK, NO RUNTIME EXCEPTION IS THROWN!!!
  <igx-icon fontSet="fa" name="fa-home"></igx-icon>
  <igx-icon fontSet="fas" name="home"></igx-icon>
  <igx-icon fontSet="fa" name="home"></igx-icon>
  <igx-icon fontSet="fas" name="fas-home"></igx-icon>
</igx-action-icon>
<!--  THIS WORKS, BUT WE'D LIKE TO MOVE AWAY FROM IT -->
<fa-icon
  [icon]="item.active ? home.iconSelected : home.iconDefault"
>
</fa-icon>
</igx-navbar>
Where `home` is defined in the component's code as:
interface MenuItem {
name: string;
iconDefault: IconLookup;
iconSelected: IconLookup;
active: boolean;
}
const home: MenuItem =
{
name: 'Home',
iconDefault: { prefix: 'far', iconName: 'home' },
iconSelected: { prefix: 'fas', iconName: 'home' },
active: true,
};
Parents Reply Children
No Data