Primeng: Button support custom icon

[zealitude]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

What is the motivation / use case for changing the behavior?

I want to use my own svg icon instead of font-awesome icon.

suggest to provide a new attribute to button component
for developer to add custom image path

[cagataycivici]

Sounds good, we're likely to do this due to the recent changes on font awesome as well.

[MikeDabrowski]

@cagataycivici
This seems to be related to https://github.com/primefaces/primeng/issues/5098 I'd like to use FA5 icons and keep its tree shaking magic. However swapping icons in menus or btns is not currently possible.
What are the chances you will add an option to inject custom elements with icons ?

[mickeyjohn]

Is there any activity to make button or toggle button support svg icon yet? can anyone suggest in ideas on how to acheive that? Thanks a lot in advance.

[jbjhjm]

Any news on this? I'm in with FA5 too.
Think it would be a great plan to add a globally configurated iconProvider helper class which can either distinguish between different icon systems or can be replaced to provide an own rendering system.

[yelhouti]

@cagataycivici do you want help by any chance for this?

[yelhouti]

here is a workaround/hack tu support fa-icons in the meantime:

<p-button [label]="label" icon="true">
    <fa-icon icon="plus" [classes]="['ui-button-icon-left']"></fa-icon>
</p-button>

the icon="true" is a "lie" that will add a class true but activate and deactivate some other classes, the ui-button-icon-left should give the correct design/dimensions to the the svg icon, hope it helps someone else.
it also works with icon only

Edit: don't forget that many components (tables, calendar...) require primeicons si you want just be able to remove it from your project.
@cagataycivici would it possible to have a primeicons-mandatory version with only the icons needed by other components to reduce bundle size? having an svg/js version would be even better, but in the mean time this should be great. Thank you!

[bendehghan]

What @yelhouti says works for buttons. Is there a workaround for menus also?

I'm importing the whole fontawesome for just a menu now. I can use tree shaking for all other parts but the menu is making me rethink the whole thing. I could even live with custom icons on the menu that are images and not fonts. If the icons in primeicons was more comprehensive, I'd use those but they're very limiting. One thing that I get for free with fontawesome on the menus is that I use fal-fa fonts so the light font and when the menu item is clicked it switches to fas-fa font so the menu goes from thin and unclicked to filled in when clicked. That's very nice. With primeicons I also lose that.

So for menus there is a good solution with fontawesome and the replacement is very poor and/or non-existent.

[jbjhjm]

Not that I know of @bendehghan .

Proposal idea 1 - pass ref

Support element/template references to be passed to icon inputs.
That way one could use both systems:

<ng-template #myIcon><fa-icon icon="something" ></fa-icon></ng-template>
<button pButton [icon]="myIcon"></button>

cons: pretty much code to show a icon.

Proposal idea 2 - support content child

Use @ContentChild('#icon') to find and render icon correctly.

<button pButton icon="my-icon-class">
  <fa-icon icon="something" id="icon"></fa-icon>
</button>

cons: not working for input[type=submit].

---

both solutions have one additional weakness: They only work in templates. Any idea how a custom icon element could work with MenuItem Model?

[projectX21]

With new v10 it is easier to include custom icons into buttons. I have the following workaround in my project:

<button type="button" pButton pRipple class="custom-label">
  <fa-icon icon="bars"></fa-icon>
</button>

style.scss:

button.p-button.custom-label > span.p-button-label {
  display: none;
}

The p-button-label has to be hidden, because otherwise the text '& nbsp;' will be shown. However, if you need a label text, it can be included into the button tag easily:

<button type="button" pButton pRipple class="custom-label">
  <fa-icon icon="bars"></fa-icon>
  <span>my own label</span>
</button>

Now you can create your own customized label inside the button tag.

[yigitfindikli]

Fixed in v10.