HugeiconsIcon Wrapper

The @hugeicons/angular package provides a HugeiconsIconComponent that can render any icon from our libraries.
Think of it as a smart wrapper: you pass it an icon object via [icon], and it handles sizing, color, stroke width, and even switching between two icons for different states.

Inputs

State-based icons with altIcon and showAlt

Use altIcon and showAlt to swap between two icons based on component state:

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-theme-toggle',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <button (click)="isDark = !isDark">
      <hugeicons-icon
        [icon]="SunIcon"
        [altIcon]="Moon02Icon"
        [showAlt]="isDark"
      ></hugeicons-icon>
    </button>
  `,
})
export class ThemeToggleComponent {
  SunIcon = SunIcon
  Moon02Icon = Moon02Icon
  isDark = false
}

Styling icons

You can style icons in a few ways:

• size: controls the rendered icon size in pixels.
• color: accepts any valid CSS color (e.g. #111827, rgb(0,0,0), currentColor).
• strokeWidth: adjusts the thickness of stroke-based icons.
• absoluteStrokeWidth: keeps that thickness fixed as the icon scales.
• class: attach utility classes from Tailwind, etc., via the standard class attribute.

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { Notification03Icon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-notification-icon',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <hugeicons-icon
      [icon]="Notification03Icon"
      [size]="32"
      color="#6366f1"
      [strokeWidth]="1.75"
      class="inline-block align-middle"
    ></hugeicons-icon>
  `,
})
export class NotificationIconComponent {
  Notification03Icon = Notification03Icon
}

When using currentColor, the icon inherits the text color from its parent, which works well inside buttons, links, and headings.

absoluteStrokeWidth changes how strokeWidth scales. By default the stroke grows with size, so a 48px icon has a stroke twice as thick as a 24px one. With absoluteStrokeWidth the stroke stays at the width you pass no matter the size, which keeps a set of differently sized icons visually consistent. It only takes effect when strokeWidth is set explicitly.

More patterns and examples

• For accessibility, theming, and composition patterns, see Best Practices with Angular.
• For complete UI examples (search bar, theme toggle, navigation), see Examples with Angular.