@ng-icons/bootstrap-icons
@ng-icons/bootstrap-icons
npm i @ng-icons/bootstrap-icons
@ng-icons/bootstrap-icons

@ng-icons/bootstrap-icons

The ultimate icon library for Angular

by ng-icons

22.4.0 (see all)License:MITTypeScript:Built-In
npm i @ng-icons/bootstrap-icons
Readme
logo # 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 23,000 icons for you to use in your projects.

Currently, we support the following libraries:

Got suggestions for additional iconsets? Create an issue and we can consider adding them!

Supported Versions

Angular VersionNg Icon Version
11.x.x12.x.x
12.x.x12.x.x - 13.x.x
13.x.x13.x.x - 17.x.x
14.x.x17.x.x - 22.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.

Installation

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 ...

Packages

The following packages are available:

PackageLicense
@ng-icons/coreMIT
@ng-icons/bootstrap-iconsMIT
@ng-icons/heroiconsMIT
@ng-icons/ioniconsMIT
@ng-icons/material-iconsApache 2.0
@ng-icons/css.ggMIT
@ng-icons/feather-iconsMIT
@ng-icons/jam-iconsMIT
@ng-icons/octiconsMIT
@ng-icons/radix-iconsMIT
@ng-icons/tabler-iconsMIT
@ng-icons/akar-iconsMIT
@ng-icons/iconoirMIT
@ng-icons/cryptocurrency-iconsCC0-1.0
@ng-icons/simple-iconsCC0-1.0
@ng-icons/typiconsCC-BY-SA-4.0
@ng-icons/dripiconsCC-BY-SA-4.0
@ng-icons/ux-aspectsApache 2.0
@ng-icons/circum-iconsMPL-2.0

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/outline';

@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="featherAirplay"></ng-icon>
NameTypeDescription
sizestringDefine the size of the icon. This defaults to the current font size.
colorstringDefine the color of the icon. This defaults to the current text color.
strokeWidthstring | numberDefine the stroke-width of the icon. This only works on iconsets that use strokes.

Standalone Components

As of version 18.0.0 Ng Icons nows supports standalone components. You can import icons using the provideIcons function which can be placed anywhere you can register providers. The optimal location would be in the @Component providers array.

You can also import the component directly by importing NgIconComponent or the NG_ICON_DIRECTIVES constant.

import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { featherAirplay } from '@ng-icons/feather-icons';
import { heroUsers } from '@ng-icons/heroicons/outline';

@Component({
  standalone: true,
  imports: [NgIconComponent],
  providers: [provideIcons({ featherAirplay, heroUsers })],
})
export class AppComponent {}

Downloads/wk

128

GitHub Stars

97

LAST COMMIT

9mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
22.4.0
latest
1mo ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate