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.
- Server Side Rendering (Angular Universal)
- Accessible
- CDN icon loading
- Standalone Component API
Angular | dfx-bootstrap-icons |
---|---|
17.x.x | 1.x.x |
- npm
npm install dfx-bootstrap-icons
- pnpm
pnpm install dfx-bootstrap-icons
import { BiComponent, provideBi, withIcons, exclamationOctagonFill, xCircleFill } from 'dfx-bootstrap-icons';
@Component({
standalone: true,
selector: 'app-root',
template: ` <bi name="exclamation-octagon-fill" /> `,
imports: [BiComponent],
providers: [provideBi(withIcons({ exclamationOctagonFill }))],
})
export class AppComponent {}
import { BiModule, withIcons, exclamationOctagonFill } from 'dfx-bootstrap-icons';
@NgModule({
declaration: [AppComponent],
imports: [BiModule.setup(withIcons({ exclamationOctagonFill }))],
})
export class AppModule {}
@Component({
selector: 'app-root',
template: ` <bi name="exclamation-octagon-fill" /> `,
})
export class AppComponent {}
import { provideBi, BiComponent, withIcons, withWidth, withHeight, withColor, exclamationOctagonFill } from 'dfx-bootstrap-icons';
@Component({
// ...
standalone: true,
imports: [BiComponent],
providers: [provideBi(withIcons({ exclamationOctagonFill }), withWidth(16), withHeight(16), withColor('currentColor'))],
template: ` <bi name="exclamation-octagon-fill" /> `,
// ...
})
export class AppComponent {}
import { BiModule, withIcons, withWidth, withHeight, withColor, exclamationOctagonFill } from 'dfx-bootstrap-icons';
@NgModule({
declaration: [AppComponent],
imports: [BiModule.setup(withIcons({ exclamationOctagonFill }), withWidth(16), withHeight(16), withColor('currentColor'))],
})
export class AppModule {}
Name | Type | Description | Example |
---|---|---|---|
withIcons | { [key: string]: string } |
Icons you want to include in your bundle. | withIcons({ exclamationOctagonFill, xCircleFill }) |
withCDN | ...string[] |
Name of the icon. | withCDN('https://playground.dafnik.me/bootstrap-icons/icons') |
withWidth | string |
Width of the icon. | withWidth('24') |
withHeight | string |
Height of the icon. | withHeight('24') |
withColor | string |
Color of the icon. | withColor('#0000FF') |
@Component({
// ...
selector: 'app-root',
template: ` <bi name="exclamation-octagon-fill" width="16" height="16" color="currentColor" clearDimensions="false" ariaLabel="Icon" /> `,
// ...
})
export class AppComponent {}
Name | Type | Description | Default value |
---|---|---|---|
name | BiName | BiNamesEnum |
Name of the icon. | |
width | string |
Width of the icon. | 16 |
height | string |
Height of the icon. | 16 |
color | string |
Color of the icon. | currentColor |
clearDimensions | boolean |
Clears dimensions (width, height) set via config. | false |
ariaLabel | string |
aria-label which is set on the icon. | undefined |
You are not required to include every used icon in your bundle. Instead, you have the option to utilize a CDN URL, allowing you to load your icons dynamically at runtime, either exclusively or in addition to bundling them.
When providing multiple URLs, dfx-bootstrap-icons is going to pick a single one randomly at app start.
Configure a pool of CDN URLs:
import { provideBi, withCDN } from 'dfx-bootstrap-icons';
bootstrapApplication(AppComponent, {
providers: [provideBi(withCDN('https://playground.dafnik.me/bootstrap-icons/icons', 'https://test.url.at'))],
}).catch((err) => console.error(err));
Don't forget to add the HttpClient
and biCacheInterceptor
When using CDNs you can use the biCacheInterceptor
to prevent the duplicate fetching of icons.
import { biCacheInterceptor } from 'dfx-bootstrap-icons';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
providers: [provideHttpClient(withInterceptors([biCacheInterceptor]))];
// icons.ts
import {
apple,
// Import more icons
} from 'dfx-bootstrap-icons';
export const ICONS = {
apple,
// Import more icons
};
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideBi, withIcons } from 'dfx-bootstrap-icons';
import { AppComponent } from './app/app.component';
import { ICONS } from './app/icons.ts';
bootstrapApplication(AppComponent, {
providers: [provideBi(withIcons(ICONS))],
}).catch((err) => console.error(err));
import { provideBi, withIcons, allIcons } from 'dfx-bootstrap-icons';
bootstrapApplication(AppComponent, {
providers: [provideBi(withIcons(allIcons))],
}).catch((err) => console.error(err));
By Dafnik