Button: Using Icon + LoadingIcon removes common class

[luprobert]

Describe the bug

When using both [icon] + [loadingIcon] somehow the common class name from icon is removed.

Environment

Firefox, Chrome, StackBlitz

Reproducer

https://stackblitz.com/edit/bh1tmu?file=src%2Fapp%2Fbutton-loading-demo.html

Angular version

17.3.7

PrimeNG version

17.17.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.7.1

Browser(s)

Firefox, Chrome

Steps to reproduce the behavior

1. Open StackBlitz
2. Check the component app/button-loading-demo.html and see (icon="pi pi-check"
   loadingIcon="pi pi-home")
3. Check the icon classes on the rendered button

Expected behavior

Both icons should be rendered.

[SoyDiego]

Hi @luprobert.
I fixed the problem in #15733.
Now we should wait until PrimeNG Team approve it!.

Thanks for report it!

[daniel1919-00]

Hi @SoyDiego.

The same thing happens regardless of the webfont used, for example with fontawesome: check stackblitz .

Does your fix only apply to the primeng pi icons?

[SoyDiego]

Hi @SoyDiego.

The same thing happens regardless of the webfont used, for example with fontawesome: check stackblitz .

Does your fix only apply to the primeng pi icons?

Yes my solution is only applying for pi icons. I'm checking if I can fix it for FontAwesome too

[daniel1919-00]

We should look for a more generic solution, the issue seems to be that common classes between [icon] and [loadingIcon] are removed from the first input.

[SoyDiego]

We should look for a more generic solution, the issue seems to be that common classes between [icon] and [loadingIcon] are removed from the first input.

I tried a lot of things and I cannot yet. Maybe I will cancel my PR, maybe someone has a better solution

[SoyDiego]

@daniel1919-00 I think now I fixed. Now is adding the text that you write perfectly in your icon and loadingIcon attribute. If you can check will be nice.

[daniel1919-00]

@SoyDiego Just tested it now using your PR with pictogrammers material design webfonts and it seems to be fixed 😄. Great work!

[SoyDiego]

@SoyDiego Just tested it now using your PR with pictogrammers material design webfonts and it seems to be fixed 😄. Great work!

great! thanks for testing it!
Now we should wait to PrimeNG Team approve it and consider my solution good too!

Thanks again =)