Use Font Awesome Angular Component in 5 simple steps

Fontawesome is most popular icon tool kit. It has 1500+ free icons. Most importantly these icons are created using scalable vectors and automatically inherit CSS size and color. This means they blend in with text inline wherever you put them. This makes it high-quality icons that work well on any screen size.

Before Angular 5, we had to install a font-awesome package and reference its CSS. Now we have an angular component for fontawesome which makes it simple, clean and neat.

Below are the five simple steps to add fontawesome components into your angular application.

You can download the source code from here

1. Create a new angular app. And remove the whole code in the ‘app.component.html’ file. We don’t need this as we just want to see how to use it.

ng new angular-fontawesome

2. Install fontawesome angular components

npm install @fortawesome/fontawesome-SVG-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

3. Import FontAwesomeModule into app.module.ts

4. Import the icon you want to use into component

Identifying font classes is very easy.

class name ‘fa-home’ converts to fame

class name ‘fa-long-arrow-alt-left‘ converts to faLongArrowAltLeft

5. Add the icon in the component HTML file.

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

Compile and run it.