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
  • Standalone Components
  • Module
  • Configuration parameters
  • Component
  • Component parameters
  • CDN
• Examples
  • Provide imported icons application wide
  • Import all icons (not recommended)

Features

• Server Side Rendering (Angular Universal)
• Accessible
• CDN icon loading
• Standalone Component API

Version compatibility

| Angular | dfx-bootstrap-icons | | ------- | ------------------- | | 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 }))],
})
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 | | ---------- | --------------------------- | ----------------------------------------- | --------------------------------------------------------------- | | 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

@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 | | --------------- | ----------------------- | ------------------------------------------------- | ----------------- | | 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 |

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://test.url.1', 'https://test.url.2'))],
}).catch((err) => console.error(err));

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