Feather Icon

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

WARNING

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>

INFO

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

Requirements

TIP

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';
...
...
@NgModule({
declarations: [
...
],
imports: [
 ...
 CoreDirectivesModule
],
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.

TIP

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.

TIP

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

Example :

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

API

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.