Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Button: Using Icon + LoadingIcon removes common class #15736

Closed
luprobert opened this issue May 29, 2024 · 8 comments · Fixed by #15773
Closed

Button: Using Icon + LoadingIcon removes common class #15736

luprobert opened this issue May 29, 2024 · 8 comments · Fixed by #15773
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone
17.18.1

Comments

@luprobert
Copy link

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.
@luprobert luprobert added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 29, 2024
@luprobert luprobert changed the title Button: Icon + LoadingIcon Button: Using Icon + LoadingIcon removes common class May 29, 2024
@SoyDiego SoyDiego mentioned this issue Jun 1, 2024
Merged
@SoyDiego
Copy link
Contributor

SoyDiego commented Jun 1, 2024

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

Thanks for report it!

@daniel1919-00
Copy link

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
Copy link
Contributor

SoyDiego commented Jun 1, 2024

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
Copy link

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
Copy link
Contributor

SoyDiego commented Jun 1, 2024

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
Copy link
Contributor

SoyDiego commented Jun 1, 2024

@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
Copy link

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

@SoyDiego
Copy link
Contributor

SoyDiego commented Jun 1, 2024

@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 =)

@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jun 13, 2024
@cetincakiroglu cetincakiroglu added this to the 17.18.1 milestone Jun 13, 2024
@rosenthalj rosenthalj mentioned this issue Jun 24, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Milestone
17.18.1
Development

Successfully merging a pull request may close this issue.

fix(Button): The icon is not shown SoyDiego/primeng
4 participants
@SoyDiego @luprobert @daniel1919-00 @cetincakiroglu