ng-bootstrap-icons
v13.1.2-canary.1
Published
Bootstrap Icons components library for your Angular Applications
Downloads
1,195
Maintainers
Readme
ng-bootstrap-icons
Work In Progress.
Description
This package allows you to use the Bootstrap Icons in your angular applications. The icons are designed by Bootstrap.
Demo
Usage
1. Install the package
npm install ng-bootstrap-icons
2. Generate a module to host the icons you'll import
ng generate module icons
3. Import assets
You need to import:
- BootstrapIconsModule, as it contains the
<bi>
component - The SVGs that you need
We put this in IconsModule for modularity. See example below:
file: icon.module.ts
import { NgModule } from '@angular/core';
import { BootstrapIconsModule } from 'ng-bootstrap-icons';
import { Alarm, App, Bookmark } from 'ng-bootstrap-icons/icons';
// Select some icons (use an object, not an array)
const icons = {
Alarm,
App,
Bookmark
};
@NgModule({
imports: [
BootstrapIconsModule.pick(icons)
],
exports: [
BootstrapIconsModule
]
})
export class IconsModule { }
// NOTES:
// 1. We add BootstrapIconsModule to the 'exports', since the <bi> component will be used in templates of parent module
// 2. Don't forget to pick some icons using BootstrapIconsModule.pick({ ... })
3. Use it in template
After importing the IconsModule in your feature or shared module, use the icons as follows:
<bi name="alarm" class="someclass"></bi>
<bi name="app" style="color: green;"></bi>
<bi name="bookmark"></bi>
Styling icons
<bi name="heart" class="big fill-red"></bi>
.big {
height: 50px;
width: 50px;
}
.fill-red {
fill: red;
}
FAQ
1. Is there a way to pick all the icons at once?
Yes, by importing allIcons
from 'ng-bootstrap-icons/icons'
:
import { NgModule } from '@angular/core';
import { BootstrapIconsModule } from 'ng-bootstrap-icons';
import { allIcons } from 'ng-bootstrap-icons/icons';
@NgModule({
imports: [
BootstrapIconsModule.pick(allIcons)
],
exports: [
BootstrapIconsModule
]
})
export class IconsModule { }
However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, it is not recommended for any application that you plan to release.
License
MIT © Gabriel Lopes