ngx-bootstrap-icons on NPM

ngx-bootstrap-icons

This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.

npm i ngx-bootstrap-icons --save

Demo

Demo Here

Usage

1. Install the package

npm i ngx-bootstrap-icons --save

2. Import module

import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';

3. Import assets

You can import all icons (not recomended) or each icon individually.

3.1 Import all icons

import { allIcons } from 'ngx-bootstrap-icons';

3.2 Import some icons

import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
// Select some icons (use an object, not an array)
const icons = {
  alarm,
  alarmFill,
  alignBottom
};

4. Import Module (all icons)

import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxBootstrapIconsModule.pick(allIcons)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.1. Import Module (some icons)

import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';
import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';

// Select some icons (use an object, not an array)
const icons = {
  alarm,
  alarmFill,
  alignBottom
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxBootstrapIconsModule.pick(icons)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/**

Another way.
--------------

Import NgxBootstrapIconsModule.pick(icons) inside of the AppModule

Import NgxBootstrapIconsModule (without the pick() method) inside of any FeatureModule where will be used.

Now you can import icons in one place only (root module) and successfully use the component anywhere you want.

**/

4.2. Configure Module (optional)

import { NgxBootstrapIconsModule, ColorTheme } from 'ngx-bootstrap-icons';
import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';

// Select some icons (use an object, not an array)
const icons = {
  alarm,
  alarmFill,
  alignBottom
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxBootstrapIconsModule.pick(icons, { 
        width: '2em', 
        height: '2em', 
        theme: ColorTheme.Danger,
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configure options

Name of input prarameter	Type	Required	Default Value	Description
width	`string`	`false`	`null`	icon default width
height	`string`	`false`	`null`	icon default height
theme	`enum`	`false`	`null`	default color theme

5. Use it in template

<i-bs name="alarm-fill"></i-bs>

or (with your preffered tag)

<i i-bs name="alarm-fill"></i>

or optionally use our enums for autocomplete support

import { iconNamesEnum } from 'ngx-bootstrap-icons';

public iconNames = iconNamesEnum;

<i-bs [name]="iconNames.AlarmFill"></i-bs>

Also you can use width and height for icon (By default width and height are 1rem)

<i-bs 
  name="alarm-fill" 
  width="2rem" 
  height="2rem">
</i-bs>

<i
  i-bs 
  name="alarm-fill" 
  width="2rem" 
  height="2rem">
</i>

6. Input parameters

Name of input prarameter	Type	Required	Default Value	Description
name	`string`	`true`	`null`	name of the icon
width	`string`	`false`	`null`	width of the icon. Default value used from svg
height	`string`	`false`	`null`	height of the icon. Default value used from svg
resetDefaultDimensions	`boolean`	`false`	`false`	if this parameter is set, default dimensions of the svg icon will be removed

ngx-bootstrap-icons
Release 1.7.2

Release 1.7.2

1.9.3

1.9.2

1.9.1

1.9.0

1.8.4

1.8.3

1.8.2

1.8.1

1.8.0

1.7.2

Documentation

ngx-bootstrap-icons

This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.

Demo

Usage

1. Install the package

2. Import module

3. Import assets

3.1 Import all icons

3.2 Import some icons

4. Import Module (all icons)

4.1. Import Module (some icons)

4.2. Configure Module (optional)

Configure options

5. Use it in template

6. Input parameters

Stats

Development practices

Releases

Contributors

ngx-bootstrap-icons Release 1.7.2

Release 1.7.2 Toggle Dropdown 1.9.3 1.9.2 1.9.1 1.9.0 1.8.4 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2

Documentation

ngx-bootstrap-icons

This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.

Demo

Usage

1. Install the package

2. Import module

3. Import assets

3.1 Import all icons

3.2 Import some icons

4. Import Module (all icons)

4.1. Import Module (some icons)

4.2. Configure Module (optional)

Configure options

5. Use it in template

6. Input parameters

Stats

Development practices

Releases

Contributors

ngx-bootstrap-icons
Release 1.7.2

Release 1.7.2

1.9.3

1.9.2

1.9.1

1.9.0

1.8.4

1.8.3

1.8.2

1.8.1

1.8.0

1.7.2