Ng-heroicons NPM

Ng Heroicons

A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.

The SVG Icons created by: https://github.com/refactoringui/heroicons

Preview and search at Heroicons.dev (Made by @codex-zaydek)

Installing Library

npm i ng-heroicons

yarn add ng-heroicons

Using Icons

Import HeroIconsModule from 'ng-heroicons', along with any icons you want to include. To include icons add them to the withIcons function call, e.g.:

import { annotation, annotationSolid, HeroIconsModule } from 'ng-heroicons';

@NgModule({
  declarations: [
  ],
  imports: [
    HeroIconsModule.withIcons({ annotation, annotationSolid })
  ],
})
export class AppModule {
}

You can import different icons in each lazy loaded module to reduce the icons loaded in each bundle.

To insert an icon use the following HTML:

<hero-icon name="annotation"></hero-icon>
<hero-icon name="annotation-solid"></hero-icon>

Icon names are in kebab-case format. If an icon doesn't appear it is likely you forgot to import it.

By default, the size of the icon uses the font size and text color. There is a size input which allows you to define any CSS value for the icon size.