# Feather Icon

We have created a Custom Directive to render feather SVG icons. Let's have a look on it.


Feather SVG icons won't render conditionally. In that case if you want to render icons conditionally you can use Feather font icons. Example : Use class .feather.icon-{icon-name}. Example : <i class="feather icon-copy font-medium-2"></i>


You can check all available icons on this (opens new window) page.

# Requirements


You can import CoreDirectivesModule directly or import our CoreCommonModule which has all the required modules.

To use the feather SVG icons we need to import the CoreDirectivesModule to that specific module where we want feather SVG icons.

import { CoreDirectivesModule } from '@core/directives/directives';
declarations: [
imports: [
providers: []

# Usage

Use attribute data-feather="icon-name" to render SVG icon.

Example :

<i data-feather="bell"></i>

# Size

Use prop [size]="size-in-px" to change SVG icon size.


Default size is 14px.

Example :

<i data-feather="bell" [size]="22"></i>

# Class

Use prop [class]="'your-class-name'" to add class to SVG icon.

Example :

<i data-feather="bell" [class]="'text-warning'"></i>

# Inner

Use prop [inner]="true/false" to toggle between innerHTML or outerHTML.


Default inner prop is false. So, It will render as outerHTML.

Example :

<i data-feather="bell" [inner]="true"></i>


Property Class Description
name [name] Name of the icon to render.
class [class] Class name to add.
size [size] Icon size.
inner [inner] If true it will render as innerHTML else it will render as outerHTML.
Last Updated: 3/9/2021, 1:15:11 PM