How to add feather icons in Angular application

In this tutorial, Learn how to integrate feather icons to angular application.

Angular 13 feather icons Example

Step 1 Create Angular Application
Step 2 Install feather-icon and types dependency
Step 3 add feather icon web font class selector
Step 4 Create a new Angular component
Step 4 Add feather icon SVG to angular application

Create Angular Application

If you don’t already have an angular application, you can create on with the code below.

ng new angular-icon-example

This creates an angular application and required files to start Change to application folder

cd angular-icon-example

Install feather-icon dependency

Add the feather dependency by using below command

npm install feather-icons --save
npm install  @types/feather-icons --save-dev

This installs and add dependency entry in package.json file

feather icons are added using class names as well as svg directly

Create a new component

Let’s create angular component for testing testing component.

A:\work\angular-icon-example>ng g component feather-icon-test
CREATE src/app/feather-icon-test/feather-icon-test.component.html (32 bytes)
CREATE src/app/feather-icon-test/feather-icon-test.component.spec.ts (691 bytes)
CREATE src/app/feather-icon-test/feather-icon-test.component.ts (318 bytes)
CREATE src/app/feather-icon-test/feather-icon-test.component.scss (0 bytes)
UPDATE src/app/app.module.ts (515 bytes)

In the component,

Import feather into angular component.
Call feather replace() method inside ngAfterViewInit callback.

import { AfterViewInit, Component, OnInit } from '@angular/core';
import * as feather from 'feather-icons';

@Component({
  selector: 'app-feather-icon-test',
  templateUrl: './feather-icon-test.component.html',
  styleUrls: ['./feather-icon-test.component.scss']
})
export class FeatherIconTestComponent implements
  OnInit, AfterViewInit {


  constructor() { }

  ngOnInit(): void {
  }
  ngAfterViewInit() {
    feather.replace();
  }

}

How to add feather icon class selector in Angular application

In this example, data-feather is an added with icon name for icon tag.

<i data-feather="chevrons-left"></i>

chevrons-left is an icon name for left arrow icon

Let’s add icons to angular component using class selector

In this component, Added search icon to button input text form app.component.html.

<p>Angular Feather Icon example</p>

<i data-feather="chevrons-left"></i>
<i data-feather="chevrons-right"></i>
<i data-feather="chevrons-up"></i>
<i data-feather="chevrons-down"></i>

Integrate feather icon using svg in Angular components

feather icons provides another way to integrate svg icons directly into an application.

Add feather-icons path to assets section in angular.json

 "assets": [{
              "glob": "*.svg",
              "input": "./node_modules/feather-icons/",
              "output": "/"
              }
            ],

Here is an SVG icon for search

<svg class="feather">
    <use href="feather-sprite.svg#circle" />
</svg> ```

Let's add svg into angular component.

**app.component.html**
```html
 <p>Angular Feather Icon svg example</p>

<svg class="feather">
    <use href="feather-sprite.svg#circle" />
</svg>

Feather - Angular