@visurel/iconify-angular NPM

Iconify for Angular

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

Installation

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.

Usage

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

@Component({
  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>

Properties

icon object, required: icon object from @iconify/icons-* packages
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"

Contributing

Code scaffolding

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

Build

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

Publishing

After building your library with ng build iconify --prod (https://v9.angular.io/guide/ivy#maintaining-library-compatibility), go to the dist folder cd dist/iconify and run npm publish.