angulariconsnebularngx-admin

How to apply theme or customize Nebular icons?


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.


Solution

  • 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;
      }
    }