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