# ng-bootstrap-icons

> Bootstrap Icons components library for your Angular Applications

Latest version **13.1.2-canary.1** (published 2021-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-bootstrap-icons
pnpm add ng-bootstrap-icons
yarn add ng-bootstrap-icons
bun add ng-bootstrap-icons
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 13.1.2-canary.1 |
| Published | 2021-12-16 |
| First published | 2020-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 12.2.0 |
| Dependencies | 1 |
| Unpacked size | 8.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gabriel Lopes |
| Maintainers | biutas |
| Keywords | angular2, angular, bootstrap, icons, svg, 2, ui, components, library |

## Links

- npm: https://www.npmjs.com/package/ng-bootstrap-icons
- Repository: https://github.com/biutas/ng-bootstrap-icons
- Homepage: https://github.com/biutas/ng-bootstrap-icons#readme
- Issues: https://github.com/biutas/ng-bootstrap-icons/issues
- npm.io page: https://npm.io/package/ng-bootstrap-icons

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 13.1.2-canary.1 (latest) — 2021-12-16
- 13.1.2-canary.0 — 2021-12-16
- 13.1.2-next — 2021-12-16
- 13.1.2 — 2021-12-16
- 13.1.1 — 2021-12-16
- 13.3.1 — 2021-12-16
- 1.3.0 — 2021-03-01
- 1.2.1 — 2020-06-29
- 1.1.1 — 2020-06-18
- 1.1.0 — 2020-06-18
- 1.0.4 — 2020-04-23
- 1.0.3 — 2020-04-22
- 1.0.2 — 2020-04-22
- 1.0.1 — 2020-04-22
- 1.0.0 — 2020-04-22

## README

## ng-bootstrap-icons
### Work In Progress.

### Description

This package allows you to use the [Bootstrap Icons](https://github.com/twbs/icons) in your angular applications. The icons are designed by Bootstrap.

### Demo
<h4>
  <a href="https://ng-bootstrap-icons.stackblitz.io">
    >> See live demo <<
  </a>  (right-click, open in new tab)
</h4>

### Usage

_1. Install the package_

```sh
npm install ng-bootstrap-icons
```

_2. Generate a module to host the icons you'll import_
 
```sh
ng generate module icons
```
  
_3. Import assets_ 

You need to import:
 - BootstrapIconsModule, as it contains the `<bi>` component
 - The SVGs that you need

We put this in IconsModule for modularity. See example below:


*file: icon.module.ts*
```ts  
import { NgModule } from '@angular/core';

import { BootstrapIconsModule } from 'ng-bootstrap-icons';
import { Alarm, App, Bookmark } from 'ng-bootstrap-icons/icons';

// Select some icons (use an object, not an array)
const icons = {
  Alarm,
  App,
  Bookmark
};

@NgModule({
  imports: [
    BootstrapIconsModule.pick(icons)
  ],
  exports: [
    BootstrapIconsModule
  ]
})
export class IconsModule { }

// NOTES:
// 1. We add BootstrapIconsModule to the 'exports', since the <bi> component will be used in templates of parent module
// 2. Don't forget to pick some icons using BootstrapIconsModule.pick({ ... })
```

_3. Use it in template_

After importing the _IconsModule_ in your feature or shared module, use the icons as follows:

```html
<bi name="alarm" class="someclass"></bi>
<bi name="app" style="color: green;"></bi>
<bi name="bookmark"></bi>
```



### Styling icons


```html
<bi name="heart" class="big fill-red"></bi>
```

```css
.big {
  height: 50px;
  width: 50px;
}

.fill-red {
  fill: red;
}
```
### FAQ

**1. Is there a way to pick all the icons at once?**

Yes, by importing `allIcons` from `'ng-bootstrap-icons/icons'`:

```ts
import { NgModule } from '@angular/core';

import { BootstrapIconsModule } from 'ng-bootstrap-icons';
import { allIcons } from 'ng-bootstrap-icons/icons';

@NgModule({
  imports: [
    BootstrapIconsModule.pick(allIcons)
  ],
  exports: [
    BootstrapIconsModule
  ]
})
export class IconsModule { }
```

However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, it is not recommended for any application that you plan to release.

### License

MIT © [Gabriel Lopes](mailto:biutas@hotmail.com)

---
_Source: https://npm.io/package/ng-bootstrap-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._