tabler-icons/packages/icons-angular

Tabler Icons for Angular

Implementation of the Tabler Icons library for Angular applications.

Browse all icons at tabler.io →

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

The minimal supported version of Angular is 16.0.0.

Installation

yarn add @tabler/icons-angular

or

npm install @tabler/icons-angular

or

pnpm install @tabler/icons-angular

How to use

It's build with ESmodules so it's tree-shakable. You decide which icons to include.

You can include icons by providing them with TablerIconModule or by importing TablerIcon objects in a single component.

I. Using the provider

1a. Import with NgModules

In a module in which the icons are needed or in a main module

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

@NgModule({
  imports: [TablerIconModule.pick({ IconBrandAngular, IconHome }), TablerIconComponent]
  // other configuration
})
export class AppModule { }

1b. Import without NgModules

In main.ts

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(TablerIconModule.pick({ IconBrandAngular }))
  ]
})

or in a route configuration

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

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

In a standalone component which needs a TablerIconComponent

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

@Component({
  imports: [TablerIconComponent],
  standalone: true,
  // other configuration
})
export class DemoComponent { }

2. Use an icon component in a template

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

II. Importing an icon object

1a. Import with NgModules

In a module in which the icons are needed or in a main module:

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

@NgModule({
  imports: [TablerIconModule, TablerIconComponent]
  // other configuration
})
export class AppModule { }

1b. Import in a standalone component

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

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

2. Use an icon component in a template

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

Props

name	type	default
size	number	24
color	string	currentColor
stroke	number	2

<tabler-icon icon="brand-angular" [size]="48" color="blue" [stroke]="1.75" class="my-icon"></tabler-icon>

Global configuration

If you want to change default property values globally you can overwrite TablerIconConfig using providers. You are able to set all three properties or just some of them.

{
  provide: TablerIconConfig, useValue: {
    size: 40,
    stroke: 1,
    color: 'blue'
  }
}

{ provide: TablerIconConfig, useValue: { size: 40 } }

Loading all icons

There is also a possibility to import all icons at once but this can cause a significant growth of your application build size.

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

@NgModule({
  imports: [TablerIconModule.pick(icons), TablerIconComponent],
  // other configuration
})
export class AppModule {}

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