Nebular: icons do not work

Created on 5 Mar 2019 · 15Comments · Source: akveo/nebular

Issue type

I'm submitting a ... (check one with "x")

[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

```console
ng add @nebular/theme


**Related code:**
Take a look at a sample application via GitHub
StackBlitz [StackBlitz Seed Project](https://stackblitz.com/edit/github-kkt2hz?file=src%2Fapp%2Fapp.component.html)

app.component.html  
```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

minor bug schematics

Source

Bloggerschmidt

Most helpful comment

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

yggg on 7 Mar 2019

👎4 👍4

All 15 comments

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

lobomacz on 6 Mar 2019

👍1

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

yggg on 7 Mar 2019

👎4 👍4

doesn't work for me

TheAngularGuy on 8 Apr 2019

doesn't work for me

you need restart the project

sarmon on 10 Apr 2019

Fixed in 4.0

nnixaa on 6 Jun 2019

I get the same error when i try to use 'nb-home' as a icon in a menu. I used a new angular project and the quick setup with 'ng add @nebular/theme'

Error: ng:///NbMenuModule/NbMenuItemComponent.ngfactory.js:48 ERROR Error: Icon 'nb-home' is not registered in pack 'eva'. Check icon name or consider switching icon pack.

DevToKa on 30 Jun 2019

am using nebular v4+ and getting error:
ERROR Error: Default pack is not registered. at throwNoDefaultPackError (index.js:2197) at NbIconLibraries.push../node_modules/@nebular/theme/fesm5/index.js.NbIconLibraries.getDefaultPackOrThrow (index.js:2327) at NbIconLibraries.push../node_modules/@nebular/theme/fesm5/index.js.NbIconLibraries.getIcon (index.js:2306) at NbIconComponent.push../node_modules/@nebular/theme/fesm5/index.js.NbIconComponent.renderIcon (index.js:2487) at NbIconComponent.push../node_modules/@nebular/theme/fesm5/index.js.NbIconComponent.ngOnInit (index.js:2479) at checkAndUpdateDirectiveInline (core.js:21764) at checkAndUpdateNodeInline (core.js:29983) at checkAndUpdateNode (core.js:29945) at debugCheckAndUpdateNode (core.js:30579) at debugCheckDirectivesFn (core.js:30539)

nutangwari on 4 Jul 2019

New project using nebular v4+ error:

core.js:9110 ERROR Error: Default pack is not registered.
at throwNoDefaultPackError (index.js:1909)
at NbIconLibraries.getDefaultPackOrThrow (index.js:2040)
at NbIconLibraries.getIcon (index.js:2019)
at NbIconComponent.renderIcon (index.js:2178)
at NbIconComponent.ngOnInit (index.js:2170)
at checkAndUpdateDirectiveInline (core.js:27776)
at checkAndUpdateNodeInline (core.js:38466)
at checkAndUpdateNode (core.js:38405)
at prodCheckAndUpdateNode (core.js:39259)
at Object.eval [as updateDirectives] (NbMenuItemComponent.ngfactory.js:57)

MSMetzger on 5 Jul 2019

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 */

gregoryalary on 6 Jul 2019

🎉1 👍1

None of the proposed solutions has resulted

kenzambrano on 12 Jul 2019

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!

MSMetzger on 15 Jul 2019

🎉2

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