primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Using loadingIcon attribute on a button breaks icon attribute

Open gk-bbai opened this issue 8 months ago • 6 comments

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.

gk-bbai avatar Apr 17 '25 23:04 gk-bbai

My current workaround is to conditionally bind the attribute:

[loadingIcon]="isLoading() ? 'pi pi-spinner' : undefined"

gk-bbai avatar Apr 17 '25 23:04 gk-bbai

PrimeNg is working properly. The button property loadingIcon works only when property loading is true.

Image

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

rosenthalj avatar Apr 18 '25 08:04 rosenthalj

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.

gk-bbai avatar Apr 18 '25 15:04 gk-bbai

@rosenthalj, I think the button needs to show the icon (not loading icon, icon when it's not loading)

Let mw work on that

Nicoss54 avatar Apr 19 '25 15:04 Nicoss54

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 avatar Jun 06 '25 06:06 zoltantoth89

@zoltantoth89 honestly I have no idea. I’m not a member of Primeng Team.

Nicoss54 avatar Jun 06 '25 16:06 Nicoss54