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.

Answer 2

I just import font awesome in angular.json file like this:

"options": {
            "styles": [
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ]
        }

Then I can use regular font awesome syntax in html, i.ex.

<i class="fa-solid fa-bus"></i>

There is 1 problem with that solution - whole font-awesome's code is paste to main style.css which increase file size.