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: 854
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: 2
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: 854
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

mmikeyy
Posts: 127
Joined: 11 May 2016, 17:39

20 Oct 2021, 04:27

Merve (or anyone else...),

You wrote:
I note that and we will discuss your issue.
Is there any chance the icons imported individually in a component from @fortawesome/free-solid-svg-icons (for example) will anytime soon be usable in an upgraded MenuItem interface or in miscellaneous components such as buttons, that for the moment accept only icons defined as strings? The paucity of the Primeicons offering compared to Fontawesome makes such an upgrade worth considering IMO. I know that I can still use the Fontawesome CSS, but there are advantages to using the component and it would be counterproductive to bloat our code with the CSS for some primeng components after switching to the angular Fontawesome module.

cagatay.civici
Prime
Posts: 18528
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 Oct 2021, 18:10

Currently you can only use it as a string, module approach is not supported. PrimeIcons are also used with strings only.

Code: Select all

icon: 'fa fa-coffee' 
In the future, we have plans to make PrimeIcons usable as importable modules instead of Strings indeed, when this approach is done, fontawesome imports may also work. Until now, strings are the solution. By the way, you can use constants for PrimeIcons.

Code: Select all

import {PrimeIcons} from 'primeng/api'

icon: 'PrimeIcons.SEARCH'' 

Post Reply

Return to “Roma - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests