How to apply theme or customize Nebular icons?

Question

I working on the Nebular theme. I have to customize the icons like icon-font-size. I found the documentation here.

<nb-icon icon="file-text-outline"></nb-icon>

My question is, How to change default values that are available here.

I have tried

<nb-icon [options]={icon-font-size:'1.5rem'} icon="file-text-outline"></nb-icon>

But it is not working.

Answer 1

I found out that the actual syntax for changing the correct parameters is:

<nb-icon [config]="{icon: 'file-text-outline', options: {'icon-font-size': '1.5rem'}}"></nb-icon>

However, the display of the icons is still being controlled through the SCSS (\@nebular\theme\styles\core\theming\_install.scss). Therefor my suggestion would be to remove the bindings and change whatever you need through your components' SCSS. Here are the corresponding selectors for each option:

nb-icon {
  font-size: 1.5rem;
  line-height: 2;
  width: 2em;
  height: 2em;
  color: #000000; //For unspecified status
  
  svg {
    vertical-align: bottom;
  }

  &.status-basic {
    color: grey;
  }

  &.status-primary {
    color: aqua;
  }

  &.status-info {
    color: bisque;
  }

  &.status-success {
    color: blueviolet;
  }

  &.status-warning {
    color: chocolate;
  }

  &.status-danger {
    color: darkgoldenrod;
  }

  &.status-control {
    color: darkseagreen;
  }
}

Answer 2

finally, it is worked for me.

in component.scss file

nb-icon {
    font-size: 2rem;
  }