Integrations
Angular
HugeiconsIcon Wrapper

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

InputTypeDefaultDescription
iconIconSvgObjectRequiredThe main icon object imported from an icon package
altIconIconSvgObject-Alternative icon object for states, interactions, or animations
showAltbooleanfalseWhen true, displays the altIcon instead of the main icon
sizenumber24Icon size in pixels
colorstringcurrentColorIcon color (CSS color value)
strokeWidthnumber1.5Width of the icon strokes (works with stroke-style icons)
classstring-Additional CSS classes applied to the host element

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

More patterns and examples

Hugeicons Pro with AngularBest Practices with Angular