How to use fontawesome icons in angular 13

Question

Itried using font awesome icons But I can't use it. I imported it in angular.json also but i cn't use it why?

Answer 1

In order to use fontawesome icons, you need to install the following 3 packages.

"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",

And in the module file, you need to import FontAwesomeModule

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    FontAwesomeModule,
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

And in the component file, you need to import specific font icon component.

import { faHeart, faComment } from '@fortawesome/free-solid-svg-icons';

export class YourComponent implements OnInit {
    faHeart = faHeart;
    faComment = faComment;
}

Lastly, in the html file you can use this icons.

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

Hope it could help you.