Package Exports
- @ng-icons/core
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ng-icons/core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Ng Icons
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 6000+ icons for you to use in your projects.
Currently, we support the following libraries:
- Bootstrap Icons
- Heroicons
- 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!
Installation
Ng Icons consists of multiple packages:
@ng-icons/core
- This contains the icon component and theNgIconsModule
that is used to register the icons you want to include in your application.@ng-icons/bootstrap-icons
- The Bootstrap iconset including both outline and solid variants.@ng-icons/heroicons
- The Heroicons iconset including both outline and solid variants.@ng-icons/css.gg
- The CSS.gg iconset.@ng-icons/feather-icons
- The Feather Icons iconset.@ng-icons/jam-icons
- The Jam Icons iconset.@ng-icons/octicons
- The Octicons iconset.@ng-icons/radix-icons
- The Radix UI iconset.@ng-icons/tabler-icons
- The Tabler iconset.@ng-icons/akar-icons
- The Akar iconset.
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 ...
Usage
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. |
strokeWidth | string | number | Define the stroke-width of the icon. |