How do I use font awesome icons in menus

Forum rules
Please note that response time for technical support is within 3-5 business days.
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: 861
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: 861
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: 18616
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'' 

pasevin
Posts: 2
Joined: 27 Sep 2021, 12:05

16 Feb 2022, 11:18

Any update on this? Thank you.

pasevin
Posts: 2
Joined: 27 Sep 2021, 12:05

16 Feb 2022, 13:46

Any updates on this?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

04 May 2022, 13:42

Sorry for the delayed response! We'll recheck this issue and get back to you asap.

Best Regards,

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

05 May 2022, 14:28

Hi,

You can use FontAwesome icons as described below. Please do the following steps.

1-) Install FontAwesome packages by npm or yarn

Code: Select all

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome@latest
2-) Import FontAwsome module into app.module.ts

Code: Select all

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
....
....

imports:[
.....
FontAwesomeModule,
.....
]
3-) Go to app.menu.component.ts and import icons you wish to use

Code: Select all

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
.....
.....
    ngOnInit() {
        this.model = [
            {
                label: 'Favorites', icon:  faCoffee,
                ....
            },


4-) Go to app.menuitem.component.ts
To use fontawesome icons, you need to use their component selector, thus remove the lines below since FontAwesome icons does not work with <i></i> tags.

Remove this code ( lines 18 & 25 )

Code: Select all

<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
Use this instead

Code: Select all

<fa-icon [icon]="item.icon" class="layout-menuitem-icon"></fa-icon>
PS: After doing this, PrimeIcons will not appear in the menu. If you want to overcome this and use both icon libraries together you need to implement your custom logic into app.menuitem.component.ts (lines 18 & 25) and it's up to you.

Regards.

Post Reply

Return to “Roma - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests