Using Angular

Integrating HugeIcons into your Angular project is straightforward. This page will guide you through the process of using HugeIcons Angular components in your application.

Importing an Icon

Once installed, in your app.component.ts you will be able to import HugeiconsComponent, HugeiconProvider, and individual icons from the @hugeicons/angular package:

import {HugeiconsComponent, HugeiconProvider, AbacusIcon, Home01Icon, AdobeXdIcon} from "@hugeicons/angular";

Adding an Icon Provider

To use the HugeIcons in your Angular application, you need to add the HugeiconProvider component to the root of your application, and use HugeiconProvider.pick to include the icons you want to use:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HugeiconsComponent],
  providers: [
    HugeiconProvider.pick({
      AbacusIcon,
      Home01Icon,
      AdobeXdIcon,
    }),
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {}

Rendering an Icon

To render an icon, use the hugeicons-icon component in your Angular template:

<div>
  <hugeicons-icon
    name="abacus"
    variant="stroke"
    type="rounded"
    color="red"
    [strokeWidth]="1.5"
    [size]="80"
  />
</div>

Icon Properties

The hugeicons-icon component accepts the following properties:

• name - The name of the icon you want to render.
• variant - The variant of the icon. Possible values are stroke, solid, bulk, twotone, and duotone.
• type - The type of the icon. Possible values are rounded, standard, and sharp.
• color - The color of the icon. You can use any valid CSS color value.
• strokeWidth - The width of the icon's stroke.
• size - The size of the icon in pixels.