Cannot use FontAwesome | Infragistics Forums

Cannot use FontAwesome

radek stasiak posted over 4 years ago

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>

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

};

Top Replies

5513

Offline Stamen Stoychev posted over 4 years ago in reply to radek stasiak +1 verified
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...view reply »

5513

Offline Stamen Stoychev posted over 4 years ago in reply to radek stasiak

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
Cancel
Reply

Cancel
15

Offline radek stasiak posted over 4 years ago in reply to Stamen Stoychev
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.
Cancel
Reply

Cancel
5513

Verified Answer
Offline Stamen Stoychev posted over 4 years ago in reply to radek stasiak

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

qregnnrxvjr.angular.zip
Cancel
Reply

Reject Answer

Cancel
15

Offline radek stasiak posted over 4 years ago

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"></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));
Cancel
Reply

Cancel