How to change icon in angular component

I want to make editable data and i use fa-icon element for edit icon. When I click on an icon, all the others change in the same way. before click after click on one icon

My fa-icon element look a like: <fa-icon (click)="EditData($event)" [icon]="['fas', icon]" size="lg"></fa-icon>

icon:IconName = 'pen-to-square';

EditData(event:Event)
  {
    const edit = this.icon === 'pen-to-square'?"true" :"false";
    const clicked = event.target as HTMLElement;
    
    const input = clicked.closest('div')?.querySelector('p');
    input!.setAttribute('contenteditable', edit);

    
    if(this.icon === 'floppy-disk')
    {
      this.SaveChanges(input);
    }
    this.icon = this.icon === 'floppy-disk' ? 'pen-to-square' : 'floppy-disk';
  }

First of all don't name functions capitalized. That's bad practice. Second use the correct type for MouseEvent instead of casting the variable.

Your Problem can be solved by inserting this.icon into the [icon] directive of

Either this way:

<fa-icon [icon]="icon"></fa-icon>

or this way:

<fa-icon icon="{{ icon }}"><fa-icon>

As far as I know this is just personal preference. If this doesn't work please answer me again. I've never personally used Font Awesome. I just used these docs as guidance.