How do I use font awesome icons in menus

Post Reply
gcherem
Posts: 4
Joined: 04 Apr 2019, 17:02

11 Apr 2019, 00:51

Hi there,

I installed the @fortawesome/angular-fontawesome package from https://www.npmjs.com/package/@fortawes ... ontawesome.

I can use icons on html templates with the selector fa-icon as you can see bellow:

component.ts

Code: Select all

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
...
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;
}
... and the respective component.html

Code: Select all

<fa-icon [icon]="faCoffee"></fa-icon>
but I need to be able to use font awesome into the menus as well, like

Code: Select all

    ngOnInit() {
        this.model = [
            { label: 'Dashboard', icon: 'fa fa-coffee', routerLink: ['/']},
            ...
            
The problem with menus is the icon above is represented by a string, and the fontawesome imported icon is an object.

More details about the component is here: https://fontawesome.com/how-to-use/on-t ... th/angular.

PS. I saw some articles refering another package https://www.npmjs.com/package/angular-font-awesome, which works with strings, but that package is not updated nor recommended by the font awesome website.

merve7
Posts: 465
Joined: 12 Sep 2017, 10:44

16 Apr 2019, 13:50

Hi,
If you want to use @fortawesome/angular-fontawesome in menu, you need to add a new line in app-submenu component. You can try the below code;
Firstly, for import;

Code: Select all

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
Secondly, use in model like;

Code: Select all

 this.model = [
            { label: 'Dashboard', icon: faCoffee, routerLink: ['/']},
Lastly, in line 355 and line 363 line

Code: Select all

<!--<i [ngClass]="child.icon" class="layout-menuitem-icon"></i>-->
<fa-icon *ngIf="child.icon" class="layout-menuitem-icon" [icon]="child.icon"></fa-icon>

Post Reply

Return to “Roma - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest