Skip to Content
IntegrationsAngularExamples with Angular

Examples with Angular

This page shows practical patterns for using HugeiconsIconComponent in common Angular UI components.
All examples assume you’ve already installed @hugeicons/angular and either the free or Pro icon packages.

Search bar with clear button

A search input that shows a clear button when text is entered:

import { Component } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { SearchIcon, CancelCircleIcon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-search',
  standalone: true,
  imports: [FormsModule, HugeiconsIconComponent],
  template: `
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <input [(ngModel)]="searchValue" type="text" placeholder="Search..." />
      <hugeicons-icon
        [icon]="SearchIcon"
        [altIcon]="CancelCircleIcon"
        [showAlt]="searchValue.length > 0"
        (click)="searchValue.length > 0 ? (searchValue = '') : null"
        [size]="24"
        color="currentColor"
      ></hugeicons-icon>
    </div>
  `,
})
export class SearchComponent {
  SearchIcon = SearchIcon
  CancelCircleIcon = CancelCircleIcon
  searchValue = ''
}

When using [(ngModel)], remember to import FormsModule as shown above, either in the imports of a standalone component or into your NgModule so two-way binding works correctly.

Favorite toggle button with Pro Icons

A favorite toggle button that switches based on the state:

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { FavouriteStrokeStandard } from '@hugeicons-pro/core-stroke-standard'
import { FavouriteSolidStandard } from '@hugeicons-pro/core-solid-standard'
 
@Component({
  selector: 'app-favorite-button',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <button (click)="isFavorite = !isFavorite">
      <hugeicons-icon
        [icon]="FavouriteStrokeStandard"
        [altIcon]="FavouriteSolidStandard"
        [showAlt]="isFavorite"
        [size]="20"
      ></hugeicons-icon>
    </button>
  `,
})
export class FavoriteButtonComponent {
  FavouriteStrokeStandard = FavouriteStrokeStandard
  FavouriteSolidStandard = FavouriteSolidStandard
  isFavorite = false
}

Bottom navigation with active state

A navigation bar that uses different icon styles to indicate the active state:

import { Component } from '@angular/core'
import { NgForOf, NgClass } from '@angular/common'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import {
  HomeIcon,
  SearchIcon,
  Notification03Icon,
  UserIcon,
} from '@hugeicons/core-free-icons'
import {
  HomeIcon as HomeDuotone,
  SearchIcon as SearchDuotone,
  Notification03Icon as NotificationDuotone,
  UserIcon as UserDuotone,
} from '@hugeicons-pro/core-duotone-rounded'
 
@Component({
  selector: 'app-nav',
  standalone: true,
  imports: [NgForOf, NgClass, HugeiconsIconComponent],
  template: `
    <nav style="display: flex; gap: 1rem;">
      <button
        *ngFor="let item of navItems"
        (click)="activeTab = item.id"
        [ngClass]="{ 'nav-item': true, active: activeTab === item.id }"
      >
        <hugeicons-icon
          [icon]="item.solidIcon"
          [altIcon]="item.duotoneIcon"
          [showAlt]="activeTab === item.id"
          [size]="24"
        ></hugeicons-icon>
      </button>
    </nav>
  `,
})
export class NavComponent {
  activeTab = 'home'
  navItems = [
    { id: 'home', solidIcon: HomeIcon, duotoneIcon: HomeDuotone },
    { id: 'search', solidIcon: SearchIcon, duotoneIcon: SearchDuotone },
    { id: 'notifications', solidIcon: Notification03Icon, duotoneIcon: NotificationDuotone },
    { id: 'profile', solidIcon: UserIcon, duotoneIcon: UserDuotone },
  ]
}

Next steps

Best Practices with AngularOverview