Angular

@hubtoolify/icons-angular brings every free icon to Angular, in the Line style: one standalone <hti-icon> component and one constant per icon. It works with Angular 17 and later, in standalone and NgModule apps, with or without zone.js, renders on the server and comes with TypeScript types. Each icon is its own constant, so your bundle keeps only the icons you import.

Install#

npm install @hubtoolify/icons-angular

Use#

Add HtiIcon to your component's imports and pass an icon constant. Constants are named hti plus the icon's name in PascalCase: arrow-up-right becomes htiArrowUpRight. Find names in the icon library.

import { Component } from '@angular/core';
import { HtiIcon, htiHome, htiCalendarCheck } from '@hubtoolify/icons-angular';

@Component({
  selector: 'app-nav',
  standalone: true,
  imports: [HtiIcon],
  template: `
    <hti-icon [icon]="home" />
    <hti-icon [icon]="home" variant="solid" [size]="32" color="#1766f2" />
    <hti-icon [icon]="calendar" variant="duotone" secondaryColor="#ffd23f" secondaryOpacity="0.9" />
    <hti-icon [icon]="home" strokeWidth="2" title="Home" />
  `,
})
export class NavComponent {
  home = htiHome;
  calendar = htiCalendarCheck;
}

Inputs#

class, style and event bindings such as (click) go on the <hti-icon> element, which displays as inline-flex around the <svg>. Every instance gets its own mask ids in the browser, so the same icon can appear any number of times on a page.

Icons by name#

When icon names come from data, register the icons once and use their names in templates. Only the icons you register are bundled. provideHtiIcons also works in a route's providers, and the sets merge.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHtiIcons, htiHome, htiSettings, htiUser } from '@hubtoolify/icons-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHtiIcons({ htiHome, htiSettings, htiUser }),
  ],
};

<hti-icon name="home" />

@for (item of nav; track item.href) {
  <a [href]="item.href"><hti-icon [name]="item.icon" [size]="18" /> {{ item.label }}</a>
}

A name that is not registered renders nothing and logs a warning in development builds.

Icon-only buttons#

Label the button, not the icon:

<button type="button" aria-label="Search" (click)="openSearch()">
  <hti-icon [icon]="search" [size]="20" />
</button>

NgModule apps#

HtiIcon is a standalone component, so an NgModule imports it directly:

import { NgModule } from '@angular/core';
import { HtiIcon } from '@hubtoolify/icons-angular';

@NgModule({
  imports: [HtiIcon],
  exports: [HtiIcon],
})
export class SharedModule {}

Server rendering#

Icons render into the server's HTML, so they show before the app boots. Each <hti-icon> opts out of hydration (ngSkipHydration) and the browser draws it again with the same markup, so provideClientHydration() reports no mismatches.

One icon per import#

Importing from the package root is fine: a production build keeps only what you use. To keep the dev server's first build quick, you can import each icon by its path:

import htiHome from '@hubtoolify/icons-angular/icons/home';

CSS classes instead#

If you would rather not add a component, the web kit works in any Angular template. After npm install @hubtoolify/icons, copy the package to your build output as an asset and link its stylesheet in index.html, or link it from the CDN. Do not add it to styles: the stylesheet points at the SVG files beside it.

// angular.json → projects.<app>.architect.build.options
"assets": [
  { "glob": "**/*", "input": "node_modules/@hubtoolify/icons/css", "output": "hubtoolify-icons/css" },
  { "glob": "**/*", "input": "node_modules/@hubtoolify/icons/svg", "output": "hubtoolify-icons/svg" }
]

<!-- src/index.html -->
<link rel="stylesheet" href="hubtoolify-icons/css/hubtoolify-icons.min.css">

<!-- any template -->
<i class="hti hti-home" aria-hidden="true"></i>

Pro styles#

With a Pro plan, @hubtoolify-pro/icons-angular has every Pro style: a standalone <hti-pro-icon> and one constant per icon, one subpath per style (import { htiHome } from '@hubtoolify-pro/icons-angular/slab'). It installs from HubToolify's own registry; see Pro packages.