This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.
npm i ngx-bootstrap-icons --save
npm i ngx-bootstrap-icons --save
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';
You can import all icons (not recomended) or each icon individually.
import { allIcons } 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
};
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxBootstrapIconsModule.pick(allIcons)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
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.
**/
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 { }
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 |
<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>
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 |