Skip to content
Angular implementation of Iconify, strongly inspired from Iconify-React.
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of visurel:master.
Latest commit 1046d29 Aug 23, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
projects/iconify chore: bump version Jul 22, 2019
.editorconfig initial commit Jul 19, 2019
.gitignore Update Aug 23, 2019
angular.json chore: initial commit Jul 19, 2019
karma.conf.js initial commit Jul 19, 2019
package.json chore: initial commit Jul 19, 2019 initial commit Jul 19, 2019
tsconfig.json chore: initial commit Jul 19, 2019
tsconfig.spec.json initial commit Jul 19, 2019
tslint.json fix: tslint issues Jul 19, 2019
yarn.lock chore: initial commit Jul 19, 2019

Iconify for Angular

Angular implementation of Iconify, strongly inspired from Iconify-React.


If you are using NPM:

npm install @visurel/iconify-angular

If you are using Yarn:

yarn add @visurel/iconify-angular

This package does not include icons. Icons are split into separate packages that available at NPM. See Iconify-React.


Assign the icon to an instance variable in the component:

import { Component } from '@angular/core';
import home from '@iconify/icons-mdi/home';
import groupAdd from '@iconify/icons-mdi/group-add';
import bellSlash from '@iconify/icons-fa-solid/bell-slash';

  selector: 'ic-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  homeIcon = home;
  groupAddIcon = groupAdd;
  bellSlashIcon = bellSlash;

Use it inside your template:

<ic-icon [icon]="homeIcon"></ic-icon>
<p>This is the inline icon: <ic-icon [icon]="bellSlashIcon" [inline]="true"></ic-icon></p>


  • icon [object, required]: icon object from @iconify/icons-* packages
  • size [string]: sets the font-size.
  • width [string | number]: width of icon. Default value is "1em".
  • height [string | number]: height of icon. Default value is "1em".
  • hFlip [boolean]: flip icon horizontally
  • vFlip [boolean]: flip icon vertically
  • flip [string]: same as hFlip and vFlip. Value is "horizontal", "vertical" or "horizontal,vertical"
  • rotate [number | string]: rotate icon. Value is number 0-3 (1 = 90deg, 2 = 180deg, 3 = 270deg) or string "90deg", "180deg", "270deg"
  • color [string] - icon color, usable only for colorless icons. By default colorless icons use currentColor, so you can set color using stylesheet by setting text color. This property can override it.
  • align [string] - icon alignment. It matters only when width and height are both set and width/height ratio doesn't match icon ratio. Value is a string that includes any of these values separated by comma: horizontal alignment: "left", "center", "right", vertical alignment: "top", "middle", "bottom", slice: "meet", "slice". Example: align="left,middle,slice". Default value is "center,middle,meet"


Code scaffolding

Run ng generate component component-name --project iconify to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project iconify.

Note: Don't forget to add --project iconify or else it will be added to the default project in your angular.json file.


Run ng build iconify to build the project. The build artifacts will be stored in the dist/ directory.


After building your library with ng build iconify, go to the dist folder cd dist/iconify and run npm publish.

Running unit tests

Run ng test iconify to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

You can’t perform that action at this time.