I am new to Angular and I am trying to create a simple web page.
Below is my `component.html` and I don't know why the web page cannot load the font icon.

`favorite.component.html`

```
<span
    class="far"
    [class.fa-star]="isFavorite"
    (click)="onClick()"
>
</span> 

```

Below is relevant the `component.ts`

```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
  isFavorite: boolean;

  constructor() { }

  ngOnInit(): void {
  }

  onClick(){
    this.isFavorite = !this.isFavorite;
  }
}

```

I changed the above one to the `<span class="fas fa-star"></span>` then it works. but this is not what I wanted. I would like to use the `[class..]` syntax. I downloaded and installed the font-awesome packages but I don't get this reason.

Appreciate it if you could help me.

Thanks.