Also available for React, Vue, Svelte, React Native and Web Components · plain SVG files in healing-icons

Install

npm install @healing-icons/angular

Requires Angular 17 or newer.

Usage

Import the HealingIcon component and the icons you use, and pass an icon to [icon]:

import { Component } from "@angular/core";
import { HealingIcon, HeartIcon } from "@healing-icons/angular";   // outline (default)
import { StarIcon } from "@healing-icons/angular/fill";

@Component({
  selector: "app-like",
  imports: [HealingIcon],
  template: `
    <healing-icon [icon]="HeartIcon" />
    <healing-icon [icon]="StarIcon" [size]="32" color="tomato" title="Favorite" />
  `,
})
export class LikeComponent {
  protected readonly HeartIcon = HeartIcon;
  protected readonly StarIcon = StarIcon;
}

Styles: @healing-icons/angular/outline, /outline-duo, /fill, /glyph-duo. Icons are named <PascalName>Icon and are plain data, so the build only includes the ones you import. A single icon can also be imported on its own: import StarIcon from "@healing-icons/angular/fill/StarIcon".

Inputs

| Input | Default | | | --- | --- | --- | | icon | | The icon (required) | | size | 24 | Width and height (number or CSS length) | | color | currentColor | Icon color; single-color icons follow the CSS text color | | secondaryColor | color | Color of the secondary layer of duo icons | | strokeWidth | icon's own | Stroke width of outline icons, in viewBox units (icons use an 18-unit grid) | | absoluteStrokeWidth | false | Treat strokeWidth as pixels, the same at every size | | title | | Accessible label; without it the icon is aria-hidden |

The <healing-icon> host is inline-flex; style it with class like any element. It works with server rendering (hydration skips the icon, which is re-created on the client).

Icon names from data

IconName is a union of every icon name. DynamicIcon loads one icon on demand when the name is only known at runtime. Prefer <healing-icon [icon]> when you can: every icon becomes a lazy chunk of your build with DynamicIcon, and it needs an extra request.

import { DynamicIcon } from "@healing-icons/angular/dynamic";

@Component({
  imports: [DynamicIcon],
  template: `<healing-dynamic-icon [name]="item.icon" variant="fill" />`,
})

Animations

Add @healing-icons/angular/animations.css to styles in angular.json, then a class on the icon:

<healing-icon [icon]="LoaderIcon" class="hi-spin" />   <!-- also hi-pulse, hi-beat, hi-fade, hi-bounce, hi-shake, hi-wiggle, hi-float -->

Links

Docs · Changelog · All icons · License: MIT © Hoang Huy Linh