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';

  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() {


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.

 <p>Angular Feather Icon svg example</p>

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