The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component. Containing over 17000+ icons for you to use in your projects.
Currently, we support the following libraries:
- Bootstrap Icons
- Heroicons
- Ionicons
- Material Icons
- CSS.gg
- Feather Icons
- Jam Icons
- Octicons
- Radix UI Icons
- Tabler Icons
- Akar Icons
Got suggestions for additional iconsets? Create an issue and we can consider adding them!
Angular Version | Ng Icon Version |
---|---|
11.x.x | 12.x.x |
12.x.x | 13.x.x (or 12.x.x) |
13.x.x | 13.x.x |
Note: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.
You must install the @ng-icons/core
package, however you only need to install the iconset libraries you intend to use.
E.g:
npm i @ng-icons/core @ng-icons/heroicons ...
or
yarn add @ng-icons/core @ng-icons/heroicons ...
The following packages are available:
Package | License |
---|---|
@ng-icons/core |
MIT |
@ng-icons/bootstrap-icons |
MIT |
@ng-icons/heroicons |
MIT |
@ng-icons/ionicons |
MIT |
@ng-icons/material-icons |
Apache 2.0 |
@ng-icons/css.gg |
MIT |
@ng-icons/feather-icons |
MIT |
@ng-icons/jam-icons |
MIT |
@ng-icons/octicons |
MIT |
@ng-icons/radix-icons |
MIT |
@ng-icons/tabler-icons |
MIT |
@ng-icons/akar-icons |
MIT |
Import the NgIconsModule
and register the icons you wish to use:
import { NgIconsModule } from '@ng-icons/core';
import { FeatherAirplay } from '@ng-icons/feather-icons';
import { HeroUsers } from '@ng-icons/heroicons';
@NgModule({
imports: [
BrowserModule,
NgIconsModule.withIcons({ FeatherAirplay, HeroUsers }),
],
})
export class AppModule {}
You can register icons in multiple modules, this allows icons to be lazy loaded in child modules.
You can then use the icon in your templates:
<ng-icon name="feather-airplay"></ng-icon>
Name | Type | Description |
---|---|---|
size | string |
Define the size of the icon. This defaults to the current font size. |
color | string |
Define the color of the icon. This defaults to the current text color. |
strokeWidth | string | number |
Define the stroke-width of the icon. This only works on iconsets that use strokes. |