Straightforward, state-of-the-art Angular icon library. Build upon the excellence of Bootstrap Icons providing you with over 2,000 icons in a bundle-size friendly way.
npm install dfx-bootstrap-iconsStraightforward, state-of-the-art Angular icon library.
Build upon the excellence of Bootstrap Icons providing you with over 2,000 icons in a bundle-size friendly way.



- Demo
- Installation
- Version compatibility
- Usage
- Setup
- Standalone Components
- Module
- Configuration
- Standalone Components
- Module
- Configuration parameters
- Component
- Component parameters
- Width, height and size
- CDN
- Server Side Rendering (Angular Universal)
- zone-less support
- Accessible
- CDN icon loading
- Standalone Component API
| Angular | dfx-bootstrap-icons |
| ------- | ------------------- |
| 22.x.x | 21.x.x |
| 21.x.x | 21.x.x |
| 20.x.x | 20.x.x |
| 20.x.x | 4.x.x |
| 19.x.x | 3.x.x |
| 18.x.x | 2.x.x |
| 17.x.x | 1.x.x |
- npm
``bash`
npm install dfx-bootstrap-icons bootstrap-icons
`
- pnpm
bash`
pnpm install dfx-bootstrap-icons bootstrap-icons
Bundle all icons into your assets folder so they will be included in your bundle but not get loaded unless you actually use them.
`typescript
// main.ts
import { provideBi, withCDN } from 'dfx-bootstrap-icons';
bootstrapApplication(AppComponent, {
providers: [provideBi(withCDN('/assets/bootstrap-icons'))],
}).catch((err) => console.error(err));
`
`json
// angular.json, project.json or nx.json
{
"options": {
"assets": [
{
"glob": "*",
"input": "node_modules/bootstrap-icons/icons",
"output": "/assets/bootstrap-icons"
}
]
}
}
`
#### HttpClient Interceptor
Use the biCacheInterceptor to prevent the duplicate fetching of icons.
`typescript
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { biCacheInterceptor } from 'dfx-bootstrap-icons';
bootstrapApplication(AppComponent, {
providers: [provideHttpClient(withInterceptors([biCacheInterceptor]))],
}).catch((err) => console.error(err));
`
Now you can use the icons via the following ways:
`typescript
import { BiComponent } from 'dfx-bootstrap-icons';
@Component({
standalone: true,
selector: 'app-root',
template:
,`
imports: [BiComponent],
})
export class AppComponent {}
`typescript
import { BiModule } from 'dfx-bootstrap-icons';
@NgModule({
declaration: [AppComponent],
imports: [BiModule],
})
export class AppModule {}
@Component({
selector: 'app-root',
template:
,`
})
export class AppComponent {}
`typescript
import { BiComponent, provideBi, withColor, withHeight, withWidth } from 'dfx-bootstrap-icons';
@Component({
// ...
standalone: true,
imports: [BiComponent],
providers: [provideBi(withWidth(16), withHeight(16), withColor('currentColor'))],
template:
,`
// ...
})
export class AppComponent {}
`typescript
import { BiModule, withColor, withHeight, withWidth } from 'dfx-bootstrap-icons';
@NgModule({
declaration: [AppComponent],
imports: [BiModule.setup(withWidth(16), withHeight(16), withColor('currentColor'))],
})
export class AppModule {}
`
| Name | Type | Description | Example | Default value |
| ---------- | ----------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------- | ----------------- | --- |
| withCDN | ...string[] \| () => string | Bootstrap Icons CDN URLs. | withCDN('https://playground.dafnik.me/bootstrap-icons/icons') | | |string
| withSize | | Size of the icon. (overrides injected width and height) | withSize('24') | undefined |string
| withWidth | | Width of the icon. | withWidth('24') | 16 |string
| withHeight | | Height of the icon. | withHeight('24') | 16 |string
| withColor | | Color of the icon. | withColor('#0000FF') | currentColor |
`typescript
@Component({
// ...
selector: 'app-root',
template:
,`
// ...
})
export class AppComponent {}
| Name | Type | Description | Default value | Required |
| --------------- | --------- | -------------------------------------------------------------- | ----------------- | ------------ |
| name | BiName | Name of the icon. | | X |string
| size | | Size of the icon. (overrides passed width and height) | | |string
| width | | Width of the icon. | | |string
| height | | Height of the icon. | | |string
| color | | Color of the icon. | | |boolean
| clearDimensions | | Clears dimensions (width, height) set via params or injection. | false | |string
| ariaLabel | | aria-label which is set on the icon. | | |
BiComponent picks the size for the icon in the following order based on which params you inject and pass.
`typescript`
const width = Input_Size ?? Input_Width ?? Injected_Size ?? Injected_Width;
const height = Input_Size ?? Input_Height ?? Injected_Size ?? Injected_Height;
CDN URLs allows you to load your icons dynamically at runtime.
When providing multiple URLs, dfx-bootstrap-icons is going to pick a single one randomly at app start.
Configure a pool of CDN URLs:
`typescript
import { provideBi, withCDN } from 'dfx-bootstrap-icons';
bootstrapApplication(AppComponent, {
providers: [provideBi(withCDN('https://playground.dafnik.me/bootstrap-icons/icons'))],
}).catch((err) => console.error(err));
`
Don't forget to add the HttpClient and biCacheInterceptor`
By Dafnik