Iconify for Angular

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

Installation

If you are using NPM:

npm install @miles170/iconify-angular

If you are using Yarn:

yarn add @miles170/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:

``typescript
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:

`html



This is the inline icon:


`

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

$3

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.

$3

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

$3

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.

$3

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

$3

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