dfx-bootstrap-icons

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

Features

• Accessible
• Server Side Rendering (Angular Universal)
• 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, provideIcons, provideBi, exclamationOctagonFill } from 'dfx-bootstrap-icons';

@Component({
  standalone: true,
  selector: 'app-root',
  template: ` <bi name="exclamation-octagon-fill" /> `,
  imports: [BiComponent],
  providers: [
    provideIcons({ exclamationOctagonFill }),
    // OR
    provideBi(withIcons({ exclamationOctagonFill })),
  ],
})
export class AppComponent {}

Module

import { BiModule, 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 {}

On component usage

@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	Default value	Description
name	BiName | BiNamesEnum		Name of the icon.
width	string	16	Width of the icon.
height	string	16	Height of the icon.
color	#${string}	correntColor	Color of the icon.
clearDimensions	boolean	false	Clears dimensions (width, height) set via config.
ariaLabel	string	undefined	aria-label which is set on the icon.

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, provideIcons } from 'dfx-bootstrap-icons';
import { AppComponent } from './app/app.component';
import { ICONS } from './app/icons.ts';

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

Import all icons (not recommended)

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

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

By Dafnik