Working with Font-Awesome icons in Angular

Unlike the preceding version of Bootstrap, Bootstrap 4 does not come with a built-in icon set. You get to choose the icon set you'd like to include for your application.

The Font-Awesome project is a very popular font-based icon set with a robust collection of high-quality icons that cover a wide range of common application functionalities, all available for free as an open source resource.

Getting ready

Let's enhance our new Bootstrap accordion component by putting a user icon next to all our author's names and a newspaper icon next to their blog post titles. Before we can get started, we will need to install font-awesome as a dependency to our project. We will do this in the same way we did for Bootstrap using NPM:

npm install font-awesome --save

This will put the font-awesome package in our node_modules package so that we can reference it.

How to do it...

Let's follow the steps to add Font-Awesome icons to our Angular web application:

1. First, we will...