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?