
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
angular-tabler-icons
Advanced tools
Tabler Icons components library for your Angular applications
This package allows you to use the Tabler Icons in your angular applications. Tabler Icons is a set of free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.
✨ Many thanks to Arjen and janschab for their contribution on this project!
1. Install the package
npm install angular-tabler-icons
# or
yarn add angular-tabler-icons
If you are using Standalone Components, use the provideTablerIcons()
import { Component } from '@angular/core';
import { TablerIconComponent, provideTablerIcons } from 'angular-tabler-icons';
import {
IconNumber123,
IconAdOff,
IconHeartFilled,
} from 'angular-tabler-icons/icons';
@Component({
selector: 'app-standalone',
imports: [TablerIconComponent],
/**
* Provide the icons which you want to use in this component.
*/
providers: [
provideTablerIcons({
IconNumber123,
IconAdOff,
IconHeartFilled,
}),
],
,
})
export class StandaloneComponent {}
<fieldset>
<legend>123</legend>
<i-tabler name="number-123"></i-tabler>
</fieldset>
<fieldset>
<legend>123 (style, big)</legend>
<i-tabler name="number-123" style="height: 60px; width: 60px;"></i-tabler>
</fieldset>
<fieldset>
<legend>ad-off (style, red)</legend>
<i-tabler name="ad-off" style="color: red;"></i-tabler>
</fieldset>
<fieldset>
<legend>heart-filled (style, red)</legend>
<i-tabler name="heart-filled" style="color: red;"></i-tabler>
</fieldset>
List of available icons: https://tabler.io/icons
This version includes Tabler Icons v3.26.0, see changelog to know which icons are available.
Each icon can be styled separately with CSS:
<i-tabler name="camera" class="big fill-red stroke-blue thin"></i-tabler>
.big {
height: 50px;
width: 50px;
}
.fill-red {
fill: red;
}
.stroke-blue {
color: blue;
}
.thin {
stroke-width: 1px;
}
Some options are available to configure the module:
import { environment } from "../environments/environment";
import { TablerIconsModule } from "angular-tabler-icons";
import * as TablerIcons from "angular-tabler-icons/icons";
@NgModule({
imports: [
TablerIconsModule.pick(TablerIcons, {
// Ignore warnings, such as "Tabler Icon not found", for example:
// ignoreWarnings: environment.production,
ignoreWarnings: true,
}),
],
exports: [TablerIconsModule],
})
export class IconsModule {}
You can import all icons at once by doing the following. However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, it is not recommended for any application that you plan to release.
import { TablerIconsModule } from "angular-tabler-icons";
import * as TablerIcons from "angular-tabler-icons/icons";
@NgModule({
imports: [TablerIconsModule.pick(TablerIcons)],
exports: [TablerIconsModule],
})
export class IconsModule {}
1. Generate a module to host the icons you'll import
ng generate module icons
2. Import assets
You need to import:
<i-tabler>
componentWe put this in IconsModule for modularity. See example below:
file: icon.module.ts
import { NgModule } from "@angular/core";
import { TablerIconsModule } from "angular-tabler-icons";
import { IconCamera, IconHeart, IconBrandGithub } from "angular-tabler-icons/icons";
// Select some icons (use an object, not an array)
const icons = {
IconCamera,
IconHeart,
IconBrandGithub,
};
@NgModule({
imports: [TablerIconsModule.pick(icons)],
exports: [TablerIconsModule],
})
export class IconsModule {}
// NOTES:
// 1. We add TablerIconsModule to the 'exports', since the <i-tabler> component will be used in templates of parent module
// 2. Don't forget to pick some icons using TablerIconsModule.pick({ ... })
3. Import IconsModule
If you are using NgModules, import it this way:
import { NgModule } from "@angular/core";
import { MyComponent } from "./my/my.component";
import { IconsModule } from "./icons.module";
@NgModule({
declarations: [MyComponent],
imports: [
IconsModule, // <--- Here
],
})
export class MyModule {}
4. Use it in template
After importing the IconsModule in your feature or shared module, use the icons as follows:
<i-tabler name="camera"></i-tabler>
<i-tabler name="heart" style="color: red;"></i-tabler>
<i-tabler name="heart-filled" style="color: red;"></i-tabler>
<i-tabler name="brand-github" class="someclass"></i-tabler>
Angular | angular-tabler-icons |
---|---|
18 & 19 | 3.22.0+ |
17 | 2.40.1+ |
16 | 2.21.1+ |
15 | 1.117.1+ |
14 | 1.72.1+ |
13 | 1.53.1+ |
12 | 1.41.3+ |
11 | 1.41.0+ |
Feel free to report issues or to contribute to this project! Here are few tips to start:
yarn lib:generate # generate components from Tabler Icons
yarn lib:build # build angular library
Automatic PR on Tabler Icons Release
, with new Tabler Icons version (e.g. 2.40.0
). This workflow will create automatically a new Pull Request.Package is automatically rebuilt and published, with the GitHub actions workflow Build and Publish package
.
FAQs
Tabler Icons components library for your Angular applications
The npm package angular-tabler-icons receives a total of 7,063 weekly downloads. As such, angular-tabler-icons popularity was classified as popular.
We found that angular-tabler-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.