p-button: Duplicate icons shown when using directive and [loading]

[psarno]

Describe the bug

When we use <button pButton pRipple> and bind its [loading] proprety to a boolean, we see two icons on the button when the boolean is set back to false.

It includes both the loading spinner icon as well as the icon set in the icon attribute. Defined as:

<button
  [loading]="isLoading"
  icon="pi pi-check"
  label="Save"
  pButton
  pRipple
  (click)="clickSearch()"
></button>

To reproduce:

  clickSearch() {
    this.isLoading = true;
    window.setInterval(() => this.isLoading = false, 200);
}

Note that setInterval in the reproducer is just to simulate some work being done.

If we replace this <button> with a <p-button>, it works as expected.

Environment

Angular 16.2.2 PrimeNG 16.3.1

Reproducer

No response

Angular version

16.2.2

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

1. Add a <button pButton pRipple> element with [loading]="isLoading"
2. When clicked, change the value of the isLoading boolean to true
3. Set isLoading back to false, simulating the loading is complete

Button is re-enabled, but shows two icons

Expected behavior

Button should not still show the loading spinner icon when the loading property is set back to false.