3 Ways to use icons in Angular

Demo prep

Step 1:

Install Angular (if you do not have Angular installed then follow instructions in this link: https://angular.io/guide/setup-local). Let’s make a new project named angularIcons.

 Type this in the terminal:ng new AngularIcons

Step 2:

CD into your project.

 cd .\AngularIcons\

1. Angular-Font Awesome

Step 1:

Let’s install the official Angular component for Font Awesome.

 Type this in the terminal:ng add @fortawesome/angular-fontawesome

 Let’s install and execute by typing Y

Step 2:

Select your preferred icon groups.

Step 3:

You see that in the app.module.ts file the FontAwesomeModule is imported on line 6 and initiated on line 15 automatically. If this is not the case add this manually.

Step 4:

Go to the component where you would like to use an icon in this case, I will just use the app component for demo Go to the component where you would like to use an icon in this case, I will just use the app component for demo purposes and open the components.ts file.

Step 5:

You can find an overview of all icons on: https://www.angularjswiki.com/fontawesome/.

 Let’s pick the icon ‘Star’

Step 6:

We can start importing the star notice if we start typing that visual studio code will give you suggestions. We are taking the faStar from the free regular library.

Your file should now have:

 import { faStar } from ‘@fortawesome/free-regular-svg-icons’;

 faStar = faStar;

Step 7:

go to the html file of your component. If you have started a new project, then remove all HTML code except.

 Add:<fa-icon [icon]=”faStar”> </fa-icon>

Step 8:

Start the application with ng serve and go to http://localhost:4200.

 Type this in the terminal: ng serve

A star should now appear in your web browser.

2. SVG with Google Font Icons

Step 1:

Go to the site of Google Fonts (https://fonts.google.com/icons) and start scrolling down.

Step 2:

Pick an icon that you like. I will be using ‘Flutter Dash‘.

Step 3:

Click on the icon and press on the SVG download button.

Step 4:

The icon downloads and we can drag and drop it to our asset folder in our application. We can now open it in VS Code.

Step 5:

We can call the icon no in the component where we want. Like this and run the application and open http://localhost:4200/.

A funny bird should now appear in your web browser.

3. Full Access to font awesome without any installation

Step 1:

Go to your application and add this line of code to your index.html like this:

<link href=”https://use.fontawesome.com/releases/v5.0.7/css/all.css” rel=”stylesheet”>

Step 2:

Pick an icon on Font Awesome (https://fontawesome.com/), I am using an icon of a building this time.

 Click icons

Step 3:

Let’s copy the line of code:

 <i class=”fas fa-building”></i>

Step 4:

Put it in the HTML of your component and run the application and open.

 Type this in the terminal: ng serve

 Go to:http://localhost:4200/.

A building should now appear in your web browser.