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:

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'nb-icon-showcase',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './icon-showcase.component.html',
})
export class IconShowcaseComponent {

  constructor() { }
}

<nb-card>
  <nb-card-body class="example-items-rows">
    <nb-icon icon="heart-outline"></nb-icon>
    <nb-icon icon="star"></nb-icon>
  </nb-card-body>
</nb-card>

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:

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'nb-icon-colors',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './icon-colors.component.html',
  styleUrls: ['./icon-colors.component.scss'],
})
export class IconColorsComponent {
}

<nb-card>
  <nb-card-body class="example-items-rows">
    <nb-icon icon="heart-outline"></nb-icon>
    <nb-icon icon="heart-outline" status="basic"></nb-icon>
    <nb-icon icon="heart-outline" status="primary"></nb-icon>
    <nb-icon icon="heart-outline" status="info"></nb-icon>
    <nb-icon icon="heart-outline" status="success"></nb-icon>
    <nb-icon icon="heart-outline" status="warning"></nb-icon>
    <nb-icon icon="heart-outline" status="danger"></nb-icon>
    <div class="control-status-example">
      <nb-icon icon="heart-outline" status="control"></nb-icon>
    </div>
  </nb-card-body>
</nb-card>

.control-status-example {
  padding: 0.25rem;
  margin: 0.25rem;
}

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.