dfx-bootstrap-icons

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.

Demo
Installation
Version compatibility
Usage
- Standalone Components
- Module
Configuration
Examples
- Provide imported icons application wide
- Import all icons (not recommended)

Features

Server Side Rendering (Angular Universal)
zone-less support
Accessible
CDN icon loading
Standalone Component API

Version compatibility

Angular	dfx-bootstrap-icons
19.x.x	3.x.x
18.x.x	2.x.x
17.x.x	1.x.x

Installation

npm
```
npm install dfx-bootstrap-icons
```
pnpm
```
pnpm install dfx-bootstrap-icons
```

Usage

Standalone Components

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, xCircleFill }))],
})
export class AppComponent {}

Module

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 {}

Configuration

Standalone Components

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 {}

Module

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 {}

Configuration parameters

Name	Type	Description	Example	Default value
withIcons	`{ [key: string]: string }`	Icons you want to include in your bundle.	`withIcons({ exclamationOctagonFill, xCircleFill })`
withCDN	`...string[]`	Bootstrap Icons CDN URLs.	`withCDN('https://playground.dafnik.me/bootstrap-icons/icons')`
withSize	`string`	Size of the icon. (overrides injected `width` and `height`)	`withSize('24')`	`undefined`
withWidth	`string`	Width of the icon.	`withWidth('24')`	`16`
withHeight	`string`	Height of the icon.	`withHeight('24')`	`16`
withColor	`string`	Color of the icon.	`withColor('#0000FF')`	`currentColor`

Component

@Component({
  // ...
  selector: 'app-root',
  template: ` <bi name="exclamation-octagon-fill" width="16" height="16" color="currentColor" clearDimensions="false" ariaLabel="Icon" /> `,
  // ...
})
export class AppComponent {}

Parameters

Name	Type	Description	Default value	Required
name	`BiName \| BiNamesEnum`	Name of the icon.		X
size	`string`	Size of the icon. (overrides passed `width` and `height`)
width	`string`	Width of the icon.
height	`string`	Height of the icon.
color	`string`	Color of the icon.
clearDimensions	`boolean`	Clears dimensions (width, height) set via params or injection.	`false`
ariaLabel	`string`	aria-label which is set on the icon.

Width, height and size??

BiComponent picks the size for the icon in the following order based on which params you inject and pass.

const width = Input_Size ?? Input_Width ?? Injected_Size ?? Injected_Width;
const height = Input_Size ?? Input_Height ?? Injected_Size ?? Injected_Height;

CDN

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'))],
}).catch((err) => console.error(err));

Don't forget to add the HttpClient and biCacheInterceptor

HttpClient Interceptor

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';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(withInterceptors([biCacheInterceptor]))],
}).catch((err) => console.error(err));

Using your `assets` folder as the CDN

You can bundle all icons into your assets folder so they will be included in your bundle but not get loaded unless you use actually them.

// main.ts

import { provideBi, withCDN } from 'dfx-bootstrap-icons';

bootstrapApplication(AppComponent, {
  providers: [provideBi(withCDN('/assets/bootstrap-icons'))],
}).catch((err) => console.error(err));

// angular.json, project.json or nx.json

{
  "options": {
    "assets": [
      {
        "glob": "*",
        "input": "node_modules/dfx-bootstrap-icons/icons",
        "output": "/assets/bootstrap-icons"
      }
    ]
  }
}

Examples

Provide imported icons application wide

// 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 all icons (not recommended)

import { provideBi, withIcons, allIcons } from 'dfx-bootstrap-icons';

bootstrapApplication(AppComponent, {
  providers: [provideBi(withIcons(allIcons))],
}).catch((err) => console.error(err));

By Dafnik