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: 758
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>

jwakeen
Posts: 1
Joined: 14 Jul 2021, 00:05

16 Jul 2021, 20:19

@merve7 When I use your proposed solution in the component's ngOnInit() I get an error:

Code: Select all

 this.model = [
            { label: 'Dashboard', icon: faCoffee, routerLink: ['/']},
It yields the error:
Type 'IconDefinition' is not assignable to type 'string'.ts(2322)
menuitem.d.ts(4, 5): The expected type comes from property 'icon' which is declared here on type 'MenuItem'
(property) MenuItem.icon?: string

When the component's html file is only this:

Code: Select all

  <div>
    <p-menubar [model]="userMenuItems"></p-menubar>
  </div>
How do we relate the icon to the specific menu item? Html like the following does display an fa icon, but it's not associated with the menu item because the menu item is in .ts file and the <fa-icon> is in the .html file:

Code: Select all

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

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

19 Jul 2021, 19:19

Hi,
My solution works for app.menuitem (layout menu component). Your used component is the PrimeNG core component and you are right, it doesn't work. I note that and we will discuss your issue. Also, you can create a github issue (https://github.com/primefaces/primeng/issues).

Best regards,

Merve Özçifçi

Post Reply

Return to “Roma - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest