Cannot use FontAwesome

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>
</igx-navbar>

<!--  THIS WORKS, BUT WE'D LIKE TO MOVE AWAY FROM IT -->
<fa-icon   [icon]="item.active ? home.iconSelected : home.iconDefault">
</fa-icon>

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,
}

;

 

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 {
    faChartPieasfasChartPie,
    faCheckCircleasfasCheckCircle,
    faCogsasfasCogs,
    faHomeasfasHome,
    faInfoasfasInfo,
    faQuestionasfasQuestion,
    faSearchasfasSearch,
    faTimesCircleasfasTimesCircle,
} 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));

 

Hello,

I think the issue is that the string you provide for the second param of addSvgIconFromText (coming from the FA icon) is just the path, while the funcion expects the full svg string, including the viewBox (as we don’t have any way to assume it for custom icons).

I am attaching a sample that uses a svg template that these values are replaced in. It works for the coffee icon that I tried with but I can’t be sure if you will be able to use it without changes for each of the icons you need. If you have any issues with that, you may consider using their fa-icon component as it is built from the ground up to work with the fa svg icons.

Thank you for using Infragistics forums! Please, let me know if I can help you further!

Best regards,

Stamen Stoychev

 

Attachments:

1. qregnnrxvjr.angular.zip

Thanks Stamen,

The second parameter is actually a String such as "<svg ……></svg>", I checked that with debugging.

I also tried the example with the "fa-coffee", and that does not work either.

Also, I think this is all due to the fact that we do NOT include the whole font style sheet.

We use https://github.com/FortAwesome/angular-fontawesome as a dependency, which lets us use, say the coffe icon with

import { faCoffee } from '@fortawesome/free-solid-svg-icons';

and

<fa-icon [icon]="faCoffee"></fa-icon>

So perhaps, it would be great if angular-fontawesome were supported.

That's certainly weird. I referenced 

@fortawesome/free-solid-svg-icons": "^5.12.0"

In the project that I shared and icon[4] was coming as just the path portion of the svg, requiring me to create a template to replace the values of the icon array in – icon[4] for path, icon[0] and icon[1] for the viewBox.

 

But my sample is working on my end. I have both an igx-icon and a fa-icon displaying the faCoffe when I run it. Do you receive any errors in the browser console when you try it that can point us to the cause?

Best regards,

Stamen Stoychev