How to add nebular icons to an angular project?

Question

I'm trying to create a Webapp with Angular 7 and Nebular.

Therefore I used schematics to install Nebular: ng add @nebular/theme

So I do have nebular-icons within my node_modules and included in my package.json as dependency:

"dependencies": {
    ...
    "nebular-icons": "^1.1.0",
    ...
  },

I also tried to add nebular-icons to styles in angular.json:

"styles": [
    "src/styles.scss",
    "node_modules/nebular-icons/scss/nebular-icons.scss"
],

Now if I try to use an icon, it still won't show up. For example:

<nb-layout-header subheader>
    <nb-actions>
      <nb-action icon="nb-home"></nb-action>
      <nb-action icon="nb-search"></nb-action>
      <nb-action icon="nb-edit"></nb-action>
    </nb-actions>
</nb-layout-header>

Unfortunately, the icons don't show up. I can only see the lines ("|") that separate the icons of nb-actions, but not the icons themselves.

Thanks for your help!

Answer 1

I tried to replicate the issue and ran into the same problem as you.

a little further search showed me that I had to install some more dependencies , so after installing these, i got the following error: (check screenshot below)

The error simply states that we are unable to reach the ttf, woff, svg files which contain the actual font, so in my

So, in my styles.css file, i just inserted the CDN paths to these files...

@font-face{
font-family:nebular;
src:url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.eot?4ozerq");src:url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.eot?4ozerq#iefix")format("embedded-opentype"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.ttf?4ozerq") format("truetype"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.woff?4ozerq") format("woff"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.svg?4ozerq#nebular") format("svg");
font-weight:normal;
font-style:normal;
}

you can check the complete demo here