How to use FontAwesome Icons in Angular Application ?

In this article, we will learn how to add FontAwesome Icons to Angular. FontAwesome is a popular icon library that provides a wide range of icons for use in web applications.

Steps to add FontAwesome Icons to Angular:

Step 1: Create a new angular project

ng new my-app

Step 2: Navigate to the project directory

cd my-app

Step 3: Install Font Awesome icons

npm install @fortawesome/fontawesome-free
npm install @fortawesome/angular-fontawesome

Step 4: Use Font Awesome Icons in Angular

Open the angular.json file from the root directory of your project and add the following code:

"styles": [
    "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
    "src/styles.css"
]

Step 5: Include the Required Imports to a styles.css file

@import "~@fortawesome/fontawesome-free/css/all.css";

Step 6: Add Icons to your components

<i class="fas fa-spinner fa-spin"></i>

Project Directory:

After completing the above-mentioned installation process, the below structure will be generated:

Example 1: Below example demonstrates the basic usage of font awesome icons in angular.

• app.component.html

<div>
    <h1 class="header">GeeksforGeeks</h1>
    <h2>
          Adding Font Awesome Icons in angular
      </h2>
    <div class="container">
        <i class="fas fa-user" 
           style="font-size:60px;">
          </i>
        <i class="fas fa-user" 
           style="font-size:54px;">
          </i>
        <i class="fas fa-user" 
           style="font-size:48px;">
          </i>
    </div>
</div>

• app.component.css

.header {
    color: green;
}

.container {
    display: flex;
    gap: 10px;
}

• styles.css

@import "~@fortawesome/fontawesome-free/css/all.css";

Output:

Example 2: Below example demonstrates the usage of animated font awesome icons in Angular.

• app.component.html

<div>
    <h1 class="header">
          GeeksforGeeks
      </h1>
    <h2>
          Adding Font Awesome Icons in angular
      </h2>
    <div class="container">
        <p>Your blog is loading...</p>
        <i class="fas fa-spinner fa-spin"></i>
    </div>
</div>

• app.component.css

.header {
    color: green;
}

• styles.css

@import "~@fortawesome/fontawesome-free/css/all.css";

Output:

tarunsinghwap7

Follow

Improve

Article Tags :

• Web Technologies
• AngularJS
• AngularJS-Questions