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)
To fix the issue, add
"./node_modules/nebular-icons/scss/nebular-icons.scss"to styles array of your project in angular.jsonI’ve same problem and have added NbEvaIconsModule to theme.module
This worked for me!
This workaround fixed it for me!
In
src/styles.css: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?