Icon overview

NbIconComponent

Icon component. Allows to render both svg and font icons. Starting from Nebular 4.0 uses Eva Icons pack by default.

Basic icon example:

Icon configuration:

<nb-icon icon="star"></nb-icon>

Installation

By default Nebular comes without any pre-installed icon pack. Starting with Nebular 4.0.0 we ship separate package called @nebular/eva-icons which integrates SVG Eva Icons pack to Nebular. To add it to your project run:

npm i eva-icons @nebular/eva-icons

This command will install Eva Icons pack. Then register NbEvaIconsModule into your app module:

import { NbEvaIconsModule } from '@nebular/eva-icons';

@NgModule({
  imports: [
    // ...
    NbEvaIconsModule,
  ],
})
export class AppModule { }

Last thing, import NbIconModule to your feature module where you need to show an icon:

import { NbIconModule } from '@nebular/theme';

@NgModule({
  imports: [
    // ...
    NbIconModule,
  ],
})
export class PageModule { }

Usage

Icon can be colored using status input:

<nb-icon icon="star" status="warning"></nb-icon>

Colored icons:

In case you need to specify an icon from a specific icon pack, this could be done using pack input property:

<nb-icon icon="star" pack="font-awesome"></nb-icon>

Additional icon settings (if available by the icon pack) could be passed using options input:

<nb-icon icon="star" [options]="{ animation: { type: 'zoom' } }"></nb-icon>

NbIconLibraries

This service allows to register multiple icon packs to use them later within <nb-icon></nb-icon> component.