Forums Ignite UI for Angular
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
Close
radek stasiak
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
No Data
Reply
  • 15
    Offline posted

    Event after feeding all the IconDefinitions of a good dozen icons all I see rendered is

    <igx-icon _ngcontent-qai-c418="" tabindex="0" ng-reflect-font="fas" ng-reflect-icon-name="home" ng-reflect-router-link="" class="fas home igx-icon" aria-hidden="true" id="igx-icon-1"><!--container--><!--container--><!--container--><!--bindings={
    "ng-reflect-ng-template-outlet": "[object Object]"
    }--></igx-icon>

    This are the imports:

    import {
    faChartPie as fasChartPie,
    faCheckCircle as fasCheckCircle,
    faCogs as fasCogs,
    faHome as fasHome,
    faInfo as fasInfo,
    faQuestion as fasQuestion,
    faSearch as fasSearch,
    faTimesCircle as fasTimesCircle,
    } from '@fortawesome/pro-regular-svg-icons';
    import {
    faChartPie,
    faCheckCircle,
    faCogs,
    faHome,
    faInfo,
    faQuestion,
    faSearch,
    faTimesCircle,
    } from '@fortawesome/pro-solid-svg-icons';
    and this is how I add the SVG payload:
    [
    faChartPie,
    faCheckCircle,
    faCogs,
    faHome,
    faInfo,
    faQuestion,
    fasChartPie,
    fasCheckCircle,
    fasCogs,
    faSearch,
    fasHome,
    fasInfo,
    fasQuestion,
    fasSearch,
    fasTimesCircle,
    faTimesCircle,
    ].forEach(d => iconService.addSvgIconFromText(d.iconName, d.icon[4] as string, d.prefix));
Children