How can I use a custom icon for a MenuItem in Angular and PrimeNG?

I am using Angular 18 and the RC version of PrimeNG 18 ("primeng": "^18.0.0-rc.1") I am trying to use a custom icon for the MenuBar component elements, since by default using icon: 'pi pi-home' in the MenuItem definition uses a PrimeNG icon. I have found this question asked and tried to implement this approach.

The issue is that it doesn't seem to work. This is my code:

app.ts:

menuItems: MenuItem[] | undefined = [
{
label: 'Tickets',
icon: 'tickets-icon',
}]


app.html:

<p-menubar [model]="menuItems">


app.css:

:host ::ng-deep {
.tickets-icon {
width: 1rem;
height: 1rem;
background-image: url("/assets/menuIcons/tickets.svg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}


I made sure that the assets folder is correctly added in angular.json:

"assets": [
"src/favicon.ico",
"src/assets"
],


And that the path to the file is correct. I have also tested the icon to make sure the svg is valid. What am I missing?

Continue reading...