visurel / iconify-angular

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

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

Name syntax

Import the icons you want to use, and export them as an object:

import home from '@iconify/icons-mdi/home';
import groupAdd from '@iconify/icons-mdi/group-add';
import bellSlash from '@iconify/icons-fa-solid/bell-slash';

export const appIcons = {
  home,
  'group-add': groupAdd,
  'bell-slash': bellSlash
}

Register the icons in the your AppComponent constructor:

import { Component } from '@angular/core';
import { IconService } from '@visurel/iconify-angular';
import { appIcons } from './icons';

@Component({
  selector: 'ic-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(iconService: IconService){
    iconService.registerAll(appIcons);
  }
}

Use it inside any template:

<ic-icon icon="home"></ic-icon>
<p>This is the inline icon: <ic-icon icon="bell-slash" [inline]="true"></ic-icon></p>

Object syntax

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
• 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"

Contributing

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.

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, 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.

iconify-angular's Issues

Ivy distribution

Building projects that depend on this package gives following warning:

⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

• @visurel/iconify-angular [es2015/esm2015] (https://github.com/visurel/iconify-angular)
  Encourage the library authors to publish an Ivy distribution.

Please update distribution for Ivy Engine
Publishing Libraries

coerce input properties

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Inputs need to be set as [inline]="true" so boolean properties, numbers and sizes are correctly handled.

Expected behavior

properties should be able to coerce from string attributes

What is the motivation / use case for changing the behavior?

more infos why you should allow / check for this can be found for example here:
https://netbasal.com/trust-but-verify-coerce-your-component-inputs-bdb743e8b579

Environment

Angular ships with a coercion package in Angular CDK 5+, so it should be fine for all allowed Angular versions.

Angular version: 5+
https://github.com/angular/components/tree/5.0.x/src/cdk/coercion

If wanted, I can submit a PR

When you are updating to ng ^9

I am unable to use in latest project, plz update to ng 9

Support string syntax

In the React module it supports String syntax. The idea is that an icon can be registered once with a name, and can then be used by providing that name.
This is a really nice feature.

The Angular module could support this using the following solution:

• Create a IconService with a method addIcon:

  @Injectable({
    providedIn: 'root',
  })
  export class IconService {
    private icons = {};
  
    addIcon(name: string, icon: string) {
      this.icons[name] = icon;
    }
  
    getIcon(name: string) {
      const icon = this.icons[name];
      if(!icon){
        throw new Error(`[Iconify]: No icon registered for name '${name}'. Call 'IconService.addIcon' to register icons.`);
      }
      return icon;
    }
  }

• Adjust the the directive:

  updateIcon() {
    const icon = this.getIcon();
  
    // Get SVG data
    const svg = new SVG(normalize(icon);
  
    // Generate SVG
    this.iconHTML = this.domSanitizer.bypassSecurityTrustHtml(svg.getSVG({
      width: this.width,
      height: this.height,
      color: this.color,
      inline: this.inline,
      box: this.box,
      align: this.align,
      hFlip: this.hFlip,
      vFlip: this.vFlip,
      flip: this.flip,
      rotate: this.rotate
    }));
  }
  
  private getIcon() {
    if (typeof this.icon !== 'object' && typeof this.icIcon !== 'object'
      && typeof this.icon !== 'string' && typeof this.icIcon !== 'string') {
      throw new Error('[Iconify]: No icon provided');
    }
  
    if (typeof this.icon === 'string' || typeof this.icIcon === 'string') {
      return this.iconService.getIcon(this.icon || this.icIcon);
    } else {
      return this.icon || this.icIcon;
    }
  }

Usage in template:

<ic-icon icon="homeIcon"></ic-icon>

Registerering icons:

@Component({
  selector: 'ic-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(iconService: IconService){
    iconService.addIcon('home', home);
    iconService.addIcon('groupAdd', groupAdd);
    iconService.addIcon('bellSlash', bellSlash);
  }
}

Outdated npm readme

The documentation that is shown on the package page on npm is outdated (it doesn't show the name syntax section).
The README.md in the latest published version is also outdated (which makes sense, because npm uses that).

Maybe you somehow locally had the outdated README when publishing the npm package?

Angular 13 support

Any plan for the angular 13 support? seems like its not working with angular 13.

i have tested version 11.0.0 and @iconify/icons-ic version 1.1.18, angular 13 seems like some issues, not displaying the icon,

please do a test on your end. thanks

'ic-icon' is not a known element

I'm getting this error and the icons aren't showing up even though I'm following the readme for string syntax. I'm using Angular 11.

'ic-icon' is not a known element:
1. If 'ic-icon' is an Angular component, then verify that it is part of this module.
2. If 'ic-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ng

size property does not work after update

v0.0.7 ---> v11.0.0

<button color="primary" class="mr-0" mat-raised-button type="button" (click)="navigateToNotifications()">
      <span style="font-size: small;">&nbsp;&nbsp;  TÜMÜNÜ GÖRÜNTÜLE </span>
      <ic-icon [icon]="icArrows" class="ltr:-ml-1 rtl:-mr-1 ltr:mr-2 rtl:ml-2" inline="true" size="20px"></ic-icon>
 </button>

Support for Angular V16

Hi Visurel team,

I have migrated my angular app to the V16 and now I am getting errors while running the app.

This is the error:

How to fix this issue, Any suggestions?

Thanks

Angular 12 Support

I tried upgrading to angular 12.

Package "@visurel/iconify-angular" has an incompatible peer dependency to "@angular/common" (requires "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0" (extended), would install "12.0.3").

Indicate that users should import the IconModule to the app.module.ts file

Problem

I followed the steps that are described in the readme file of this repository, but there was a missing import that prevented me from using the icon set that your repository provides.

When I tried to include the icon component in one of my application's templates, I got the following error:

Snapshots of my files

Here's a snapshot of my src/app.component.ts file.

And here's a snapshot of the icons object that I provided:

Here are the versions of my current setup tools:

@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.1.1
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@schematics/angular             12.1.1
rxjs                            6.6.7
typescript                      4.3.5

How I was able to solve it

I was able to resolve this by adding the IconModule to the imports array of my app.module.ts file, like this:

import { IconModule } from '@visurel/iconify-angular';

@NgModule({
	declarations: [
		AppComponent,
	],
	imports: [BrowserModule, IconModule],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

Suggestions

I think you should clarify things in your readme file about the missing import for the IconModule.

I would be glad to provide any information that you could use to resolve this.

Import icon dynamically from module path

Hi,
How can I show icon from icon module path? Because when importing dynamically it seems not to find that module.

Or maybe with a name icon, will I show it by not import static icon module path. Here is my code

const importIcon = '@iconify/icons-ic/' + item.icon;
const a = import(importIcon).then(icon => {
   console.log(icon);
});

ERROR Error: Uncaught (in promise): Error: Cannot find module '@iconify/icons-ic/twotone-layers'
Error: Cannot find module '@iconify/icons-ic/twotone-layers'