nebular: icons do not work

Issue type

I’m submitting a … (check one with “x”)

  • bug report
  • feature request

Issue description

Current behavior: Starting a fresh new Angular app with Nebular default theme doesn’t display the icons (e.g. search icon).

Expected behavior: Displaying icons in default theme

Steps to reproduce: With Anglar CLI

ng new nebular
ng add @nebular/theme

Related code: Take a look at a sample application via GitHub StackBlitz StackBlitz Seed Project

app.component.html

<nb-actions size="small">
  <nb-action icon="nb-search"></nb-action>
  <nb-action icon="nb-power-circled"></nb-action>
  <nb-action icon="nb-person"></nb-action>
</nb-actions>

Other information:

package.json

  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/cdk": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@nebular/theme": "^3.4.0",
    "core-js": "^2.5.4",
    "nebular-icons": "^1.1.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.4",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@schematics/angular": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
node --version
v11.9.0

npm --version
6.8.0

ng version
Angular CLI: 7.3.4
Node: 11.9.0
OS: darwin x64
Angular: 7.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.4
@angular-devkit/build-angular     0.13.4
@angular-devkit/build-optimizer   0.13.4
@angular-devkit/build-webpack     0.13.4
@angular-devkit/core              7.3.4
@angular-devkit/schematics        7.3.4
@angular/cdk                      7.2.2
@angular/cli                      7.3.4
@ngtools/webpack                  7.3.4
@schematics/angular               7.2.4
@schematics/update                0.13.4
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (1 by maintainers)

Most upvoted comments

To fix the issue, add "./node_modules/nebular-icons/scss/nebular-icons.scss" to styles array of your project in angular.json

I’ve same problem and have added NbEvaIconsModule to theme.module

This workaround fixed it for me!

In src/styles.css :

@import 'themes';
@import '~@nebular/theme/styles/globals';
@import '~nebular-icons/css/nebular-icons.css'; // <- Add that

@include nb-install() {
  @include nb-theme-global();
};
/* You can add global styles to this file, and also import other style files */

This worked for me!

This workaround fixed it for me!

In src/styles.css :

@import 'themes';
@import '~@nebular/theme/styles/globals';
@import '~nebular-icons/css/nebular-icons.css'; // <- Add that

@include nb-install() {
  @include nb-theme-global();
};
/* You can add global styles to this file, and also import other style files */

go to the eva-icons and search for the icons you want then replace them <nb-actions size="small"> <nb-action icon="nb-search"></nb-action> <nb-action icon="nb-power-circled"></nb-action> <nb-action icon="nb-person"></nb-action> </nb-actions>

becomes <nb-actions size="small"> <nb-action icon="search-outline"></nb-action> <nb-action icon="power-outline"></nb-action> <nb-action icon="person-outline"></nb-action> </nb-actions>

this worked for me am using version 4.2

I am experiencing the exact same issue. Any workaround for this?