Primeng: Custom icons (e.g. buttons, panel menus)

[ARandomDude]

I'm submitting a ...

[ ] bug report
[X] feature request
[ ] support request 

Hello :)

When working with PrimeNG, I think it's a pity that only Font Awesome icons can be used. At least for me it makes these components a no-go for business applications. I think it's quite a common use case to display custom icons for buttons, menus et cetera.

So it would be very useful to not only specify:
<button pButton type="button" icon="fa-check" iconPos="left"></button>

But
<button pButton type="button" icon="PATH/TO/MY/ICON.png" iconPos="left"></button>

And e.g. with panel menus:

    this.menuItems = [
      {
        label: 'File',
        items: [
          {label: 'Download', icon: 'PATH/TO/MY/ICON.png'},
        ]
      }

[cagataycivici]

You can easily override them with css actually and use your own icon set.

<button pButton type="button" icon="my-icon" iconPos="left"></button>

.my-icon &:before {
    content: icon here
}

Nobody uses png icons anymore ;)

[ARandomDude]

Thank you for answer! Actually, I used exactly this as a workaround :)

But that means that I have to create a selector for every icon that I use, does it not?

[billfranklin]

using the CSS workaround eliminates the possibility to use dynamic menus where you only have to edit the JSON menu structure and provide a valid location to the icon you want to use. Please allow the use of custom icon locations.

[sudheerj]

@ARandomDude Only when you want to use custom icon.
@billfranklin You can discuss about dynamic issues in forum or separate thread.

[mickeyjohn]

iconPos="left"

You can easily override them with css actually and use your own icon set.

<button pButton type="button" icon="my-icon" iconPos="left"></button>

.my-icon &:before { content: icon here }
Nobody uses png icons anymore ;)

cagataycivici

You can easily override them with css actually and use your own icon set.

<button pButton type="button" icon="my-icon" iconPos="left"></button>

.my-icon &:before { content: icon here }
Nobody uses png icons anymore ;)

@cagataycivici Is this way work with an svg icon? Can you give an example? Thanks.

[tigrenok00]

@mickeyjohn
Hi, did you make it work with svg? Do you have an example? Thanks!