# 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](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
## 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`:
```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:
```ts
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):
```ts
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`.
```ts
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)
```html
```
### II. Passing an icon object (no provider)
#### 1. Import `TablerIconComponent` (standalone component or `NgModule`)
```ts
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)
```html
```
## 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_ | — |
- **`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.
```html
```
## Global configuration
To change default property values globally, use `provideTablerIconConfig()` in your providers. You can set any combination of `size`, `color`, and `stroke`.
```ts
import { provideTablerIconConfig, provideTablerIcons, IconHome } from '@tabler/icons-angular';
bootstrapApplication(AppComponent, {
providers: [
provideTablerIcons({ IconHome }),
provideTablerIconConfig({
size: 40,
stroke: 1,
color: 'blue'
})
]
});
```
Or only some defaults:
```ts
provideTablerIconConfig({ size: 40 })
```
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/tabler/tabler-icons/blob/main/CONTRIBUTING.md).
Caught a mistake or want to contribute to the documentation? [Edit this page on GitHub](https://github.com/tabler/tabler-icons/blob/main/packages/icons-angular/README.md)
## License
Tabler Icons is licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/main/LICENSE).
## Sponsor Tabler
