Best Practices with Angular

This guide collects practical recommendations for using Hugeicons in Angular so your icons stay fast, consistent, and accessible.

Import icons efficiently

Always import only the icons you need from the specific package:

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { Notification03Icon } from '@hugeicons/core-free-icons'
// or, for Pro:
// import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded'
 
@Component({
  selector: 'app-example',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <hugeicons-icon [icon]="Notification03Icon"></hugeicons-icon>
  `,
})
export class ExampleComponent {
  Notification03Icon = Notification03Icon
}

Avoid wildcard imports (e.g. import * as Icons from '...') because they prevent bundlers from tree‑shaking unused icons and can increase your bundle size.

Keep icons accessible

Use different patterns for decorative vs meaningful icons:

Decorative icons (purely visual): keep them inside elements that already have accessible text.
Meaningful icons (e.g., trash, download): make sure there is a label.

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { DownloadIcon, Delete01Icon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-accessible-icons',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <!-- Icon with visible label (screen readers read the text) -->
    <button type="button">
      <hugeicons-icon
        [icon]="DownloadIcon"
        [size]="18"
        class="mr-1"
      ></hugeicons-icon>
      Download
    </button>
 
    <!-- Icon-only button with aria-label -->
    <button type="button" aria-label="Delete">
      <hugeicons-icon
        [icon]="Delete01Icon"
        [size]="18"
      ></hugeicons-icon>
    </button>
  `,
})
export class AccessibleIconsComponent {
  DownloadIcon = DownloadIcon
  Delete01Icon = Delete01Icon
}

Avoid relying on icon shape alone to convey critical information; pair icons with text or tooltips where possible.

Use `altIcon` + `showAlt` for state

Instead of conditionally rendering two separate icons, use altIcon and showAlt on the same HugeiconsIconComponent:

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { ViewIcon, ViewOffSlashIcon } from '@hugeicons-pro/core-stroke-rounded'
 
@Component({
  selector: 'app-password-toggle',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <button
      type="button"
      (click)="visible = !visible"
      [attr.aria-label]="visible ? 'Hide password' : 'Show password'"
    >
      <hugeicons-icon
        [icon]="ViewIcon"
        [altIcon]="ViewOffSlashIcon"
        [showAlt]="visible"
        [size]="18"
      ></hugeicons-icon>
    </button>
  `,
})
export class PasswordToggleComponent {
  ViewIcon = ViewIcon
  ViewOffSlashIcon = ViewOffSlashIcon
  visible = false
}

This keeps your templates simpler and ensures both states share the same sizing and styling.

Create an app-level `Icon` wrapper

In many apps it’s helpful to create your own Icon component that forwards inputs to HugeiconsIconComponent while enforcing project-wide defaults for size, color, and stroke width.

import { Component, Input } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
 
@Component({
  selector: 'app-icon',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <hugeicons-icon
      [icon]="icon"
      [altIcon]="altIcon"
      [showAlt]="showAlt"
      [size]="size"
      [color]="color"
      [strokeWidth]="strokeWidth"
      [class]="class"
    ></hugeicons-icon>
  `,
})
export class IconComponent {
  @Input() icon!: unknown
  @Input() altIcon: unknown | null = null
  @Input() showAlt = false
  @Input() size = 16
  @Input() color = 'currentColor'
  @Input() strokeWidth = 1.5
  @Input() class = ''
}

Now you can use IconComponent throughout your project and adjust defaults (size, color, stroke width, theming) in one place without touching all call sites.

import { Component } from '@angular/core'
import { IconComponent } from './icon.component'
import { Delete01Icon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-delete-button',
  standalone: true,
  imports: [IconComponent],
  template: `
    <button type="button" aria-label="Delete">
      <app-icon
        [icon]="Delete01Icon"
        [size]="18"
      ></app-icon>
    </button>
  `,
})
export class DeleteButtonComponent {
  Delete01Icon = Delete01Icon
}

Centralizing patterns like this keeps styling and accessibility consistent across your app.

Plan for dark mode and themes

When supporting dark mode, prefer currentColor and theme-aware classes instead of hard‑coding colors:

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { Moon02Icon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-dark-mode-icon',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <div class="text-slate-700 dark:text-slate-200">
      <hugeicons-icon
        [icon]="Moon02Icon"
        [size]="20"
        color="currentColor"
      ></hugeicons-icon>
    </div>
  `,
})
export class DarkModeIconComponent {
  Moon02Icon = Moon02Icon
}

If you need different styles per theme (e.g., duotone in dark mode), you can pair altIcon with your theme state.

Name and organize icons consistently

Use the shorter *Icon names (SearchIcon) for readability.
Use style-specific names (SearchStrokeRounded) only when you need multiple styles of the same icon in one file.
Group icons by domain in your codebase (e.g., icons/navigation.ts, icons/forms.ts) to make reuse easier.

// icons/navigation.ts
export { HomeIcon, SearchIcon, Notification03Icon, UserIcon } from '@hugeicons/core-free-icons'

Then import from your own modules instead of raw packages in components to keep imports tidy and consistent.

HugeiconsIcon Wrapper Examples with Angular