Hi,
The code you posted is used by the documentation. You can remove or adapt it if you don't need it.
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
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
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
Code: Select all
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
Use this instead
CODE: SELECT ALL
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.