Awesome font is not working on ionic angular

Question

Am trying to use Awesome font in my ionic 5 project I have successfully implemented it, if I use if in the html file it works fine but I want to replace it a button text when clicked with a spinner.

My html code

<button ion-button type="submit" (click)="submitt()" class="btn-Yellow [disabled]="!loginForm.valid" [innerHTML]="btnText | safe: 'html'">
</button>

TS code

export class LoginPage implements OnInit {

  btnText: string;

  constructor() {
    this.btnText = '<span style="color:white">Login</span>';
  }

  ngOnInit() {}

  submitt(): void {
    this.btnText = '<fa-icon icon="spinner"></fa-icon>';
  }
}

I really need your help guys

Answer 1

fa-icon is a component. You can't make Angular component working(unless it's a web component) with innerHTML. Angular won't compile it at all.

The easiest way to solve your problem is to threw away innerHTML and use regular html instead with the help of some flag.

html

<button ion-button type="submit" (click)="submitt()" class="btn-Yellow [disabled]="!loginForm.valid">
   <span *ngIf="!loading" style="color:white">Login</span>
   <fa-icon *ngIf="loading" icon="spinner"></fa-icon>
</button>

ts

export class LoginPage implements OnInit {

  loading = false;

  submitt(): void {
    this.loading = true;
  }
}

Another way to add icon dynamically is to use progammatic API provided by Angular Awesome library https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/features.md#programmatic-api But I don't think you want to dig into it:)