Tabler Icons for Angular

Sponsors

If you want to support our project and help us grow it, you can become a sponsor on GitHub or just donate on PayPal :)

Prerequisites

• Angular: >=21.0.0 (@angular/core and @angular/common).

Installation

yarn add @tabler/icons-angular

or

npm install @tabler/icons-angular

or

pnpm add @tabler/icons-angular

How to use

The package is built with ES modules and is tree-shakable. You choose which icons to include.

You can provide icons via provideTablerIcons(), or pass TablerIcon objects directly to the component.

Icons are exported as Icon… named symbols from @tabler/icons-angular. Legacy/alternate names are re-exported from the same package as additional Icon… symbols (e.g. Icon123).

I. Using the provider (icon names in templates)

1a. Standalone applications (recommended)

In main.ts:

import { provideTablerIcons, IconBrandAngular, IconHome } from '@tabler/icons-angular';

bootstrapApplication(AppComponent, {
  providers: [
    provideTablerIcons({ IconBrandAngular, IconHome })
  ]
});

Add any number of icons by including more Icon* imports in the object passed to provideTablerIcons().

Or in a route configuration:

import { IconBrandAngular, provideTablerIcons } from '@tabler/icons-angular';

export const routes: Routes = [
  {
    path: 'demo',
    component: DemoComponent,
    providers: [provideTablerIcons({ IconBrandAngular })]
  }
];

In any component that uses icons, import TablerIconComponent into that component’s imports array (standalone-style components, including the root app component):

import { TablerIconComponent } from '@tabler/icons-angular';

@Component({
  imports: [TablerIconComponent],
  // ...
})
export class DemoComponent {}

1b. NgModule-based applications

Angular 21 still supports NgModule. Import TablerIconComponent into the module’s imports and register provideTablerIcons() / provideTablerIconConfig() in the module’s providers the same way as with bootstrapApplication.

import { TablerIconComponent, provideTablerIcons, IconBrandAngular, IconHome } from '@tabler/icons-angular';

@NgModule({
  imports: [TablerIconComponent],
  providers: [provideTablerIcons({ IconBrandAngular, IconHome })],
  // ...
})
export class AppModule {}

2. Use the icon in a template (by name)

<tabler-icon icon="brand-angular" />
<tabler-icon icon="icon-brand-angular" />

II. Passing an icon object (no provider)

1. Import TablerIconComponent (standalone component or NgModule)

import { TablerIconComponent, IconBrandAngular } from '@tabler/icons-angular';

@Component({
  imports: [TablerIconComponent],
  // ...
})
export class AppComponent {
  iconBrandAngular = IconBrandAngular;
}

If you use NgModule, import TablerIconComponent in the module’s imports instead. You do not need provideTablerIcons() when you only bind [icon] to imported TablerIcon objects.

2. Use the icon in a template (by reference)

<tabler-icon [icon]="iconBrandAngular" />

Props

The component uses Angular input() APIs (signal inputs) and supports both outline and filled icon types.

| name | type | default | | --------------- | --------------------------------- | ------------ | | icon | TablerIcon | string | (required) | | size | number | 24 | | color | string | currentColor | | stroke | number | 2 | | svgClass | string | — | | svgAttributes | Record<string, string | number | undefined> | — |

• icon — Icon to display. Pass a TablerIcon object (e.g. from an import) or a string name when using provideTablerIcons().
• size — Width and height of the icon in pixels.
• color — For outline icons this sets the stroke color; for filled icons it sets the fill color.
• stroke — Stroke width for outline icons. Has no effect on filled icons.
• svgClass — Extra CSS classes to apply to the SVG element (in addition to tabler-icon and tabler-icon-{name}).
• svgAttributes — Extra attributes to apply to the SVG element (e.g. aria-label, role) for accessibility. Component-managed attributes (size, color, stroke, etc.) always take precedence and cannot be overridden.

<tabler-icon icon="brand-angular" [size]="48" color="blue" [stroke]="1.75" svgClass="my-icon" />
<!-- When using a TablerIcon object, bind a component property (e.g. alarmIcon = IconAlarm in the class): -->
<tabler-icon [icon]="alarmIcon" [svgAttributes]="{ 'aria-label': 'Alarm', 'role': 'img' }" />

Global configuration

To change default property values globally, use provideTablerIconConfig() in your providers. You can set any combination of size, color, and stroke.

import { provideTablerIconConfig, provideTablerIcons, IconHome } from '@tabler/icons-angular';

bootstrapApplication(AppComponent, {
  providers: [
    provideTablerIcons({ IconHome }),
    provideTablerIconConfig({
      size: 40,
      stroke: 1,
      color: 'blue'
    })
  ]
});

Or only some defaults:

provideTablerIconConfig({ size: 40 })

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

License

Tabler Icons is licensed under the MIT License.

Sponsor Tabler