Using loadingIcon attribute on a button breaks icon attribute
Describe the bug
When using the loadingIcon attribute on a p-button the icon is no longer displayed properly.
Cause
This happens because loadingIcon removes the pi class from the underlying span inside of the button.
Pull Request Link
No response
Reason for not contributing a PR
- [x] Lack of time
- [ ] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/github-ersbvfft-l1dbxzrf?file=src%2Fapp%2Fapp.component.html
Environment
See Stackblitz.
Angular version
19.2.7
PrimeNG version
v19
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
<!-- No bug. Icon displays properly. -->
<p-button icon="pi pi-play" />
<!-- Bugged. [loadingIcon] removes the 'pi' class from the underlying span -->
<p-button icon="pi pi-play" loadingIcon="pi pi-spinner" />
Expected behavior
Buttons should display their icon even when customizing the loading icon.
My current workaround is to conditionally bind the attribute:
[loadingIcon]="isLoading() ? 'pi pi-spinner' : undefined"
PrimeNg is working properly. The button property loadingIcon works only when property loading is true.
The video listed below is an updated version of the reproducer you provided and shows the button loadingIcon property working properly.
https://github.com/user-attachments/assets/d8f6885f-8e3d-4672-9159-014e1a510ef0
PrimeNg is working properly. The button property loadingIcon works only when property loading is true.
The video listed below is an updated version of the reproducer you provided and shows the button loadingIcon property working properly.
buttonWorking.mov
@rosenthalj The button needs to also work when [loading]="false" since buttons aren't always loading...
I left the [loading] attribute out of the demo StackBlitz in order to make it a minimal reproducible example.
@rosenthalj, I think the button needs to show the icon (not loading icon, icon when it's not loading)
Let mw work on that
Hi @Nicoss54, is there any plan to finalize and merge your fix in the near future? 🥺 We could implement a workaround in our app, but I could appreciate if we could avoid this thanks to your official bugfix.
@zoltantoth89 honestly I have no idea. I’m not a member of Primeng Team.