Angular Application using Font Awesome

While working on an Angular application, we can include the Font Awesome icon library within the application in a few simple steps.

We can either use the CDN directly or install and use the installed Font Awesome library files as shown below.

Using Font Awesome CDN

We can directly include a CDN link within the index.html file as shown below.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SampleApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

Install & Use Font Awesome

Run any of the below commands within a terminal to install the bootstrap framework.

> npm install font-awesome --save
> npm install font-awesome
> npm i font-awesome

Link the installed bootstrap CSS files into the styles array of angular.json file as shown below.

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css",
    "./node_modules/font-awesome/css/font-awesome.css"
],

Using Font Awesome Icons

Use the Font Awesome icons in the angular component's HTML as shown below.

<h1><i class="fa fa-user"></i> User Icon</h1>
<h2><i class="fa fa-heart"></i> Heart Icon</h2>

How do they look on the application UI?

The Font Awesome icons are displayed on the application UI as shown below.

Conclusion

Now, we know how to install and use the Font Awesome icon library in an Angular application.