How to show Font Awesome Icon on Angular 8 Application

We have used the Angular Font Awesome Package in Angular Version 8 to demonstrate this sample to show Font-Awesome icons on the Angular Application. There are multiple ways to achieve this and many packages are available to achieve this. But for this tutorial we have used angular-font-awesome package which can be found here at:  https://www.npmjs.com/package/angular-font-awesome

Step 1: Create the Angular Application using following command: ng new WebApp1

Step 2: Change to the application directory using following command: cd WebApp1

Step 3: Open the code of Angular Application in Visual Studio Code using the following command: code .

Step 4: Add the Font-Awesome Angular Package using following command from "Integrated Terminal" from "View" menu option on Visual Studio Code: 

npm install --save font-awesome angular-font-awesome 

If you don't install the above package and try using the below code into your app.component.html file, then it will give following error: Uncaught Error: Template parse errors: 'fa' is not a known element: The solution is first install the above Font Awesome Angular Package into your application then use fa tag in Angular Template file.

Font-Awesome html code: <fa name="fa-address-card"></fa>

Step 5: Now, open app.module.ts file and add the following import of FontAwesome module: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 6:  Now, open the angular.json file from the root directory of your project and add the following css path to the "styles" section in architect=>build and architect=>serve section both.

"node_modules/font-awesome/css/font-awesome.css"

Step 7: Now, add the following template code to show the Font Awesome Icon using Angular-Font-Awesome Angular Package: 

<h1>Font Awesome</h1>
<div>See the below Font Awesome Icon on the Angular Application</div>
<fa name="fas fa-address-card" style="color:red;"></fa><br>
<fa name="fas fa-camera"></fa>

Step 8: Now, you can run the project using following command, it will automatically open the browser and display the output: ng serve -o

Step 9: After running the project, when the browser will open the result, it will show the following output:

You can see, from the above output, first Font-Awesome icon is Address Card and second icon is Camera. 

Step 10: If you don't want to add CSS file path into architect=>build and architect=>serve section in your angular.json file, the same way you can achieve by adding the following CSS CDN path to your index.html file which is in the root directory of your angular application, add the following link tag in the head section:

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

After adding the above link tag, you can repeat the step 7 till step 9 to run the project and see the Font Awesome Icon on the Angular Application Web Page.