1

I added icon from asset folder for PrimeNG MenuItem like this following, but it is not showing.

    this.menu = [
        {
            label: 'Dashboard',
            icon: 'dashboard-icon'
        }
    ]

In css,

.dashboard-icon { background-image: url("./assets/icons/dashboard.svg"); }

Am I missing something, or what is the correct way?

ruhulrahat
  • 1,325
  • 4
  • 15
  • 23

1 Answers1

0

The icon class is set deep within the angular component. therefore, to set your own class, you must use ng-deep. So this should solve your issue:

:host ::ng-deep .dashboard-icon { background-image: url("./assets/icons/dashboard.svg"); }
PMO1948
  • 2,210
  • 11
  • 34
  • still not showing the icon, do you think I missed any prefix on this line? icon: 'dashboard-icon' – ruhulrahat Nov 22 '20 at 07:55
  • 1
    can you see your icon if you just show it in an `` or a `span`? You may also need to add a class/ styling to set height etc – PMO1948 Nov 22 '20 at 08:13