How do I use font awesome icons in menus

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

11 Apr 2019, 00:51

Hi there,

I installed the @fortawesome/angular-fontawesome package from ... ontawesome.

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


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: ... th/angular.

PS. I saw some articles refering another package, which works with strings, but that package is not updated nor recommended by the font awesome website.

Posts: 681
Joined: 12 Sep 2017, 10:44

16 Apr 2019, 13:50

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 2 guests