如何应用主题或自定义星云图标？

Question

我正在研究星云主题。我必须自定义图标，如图标字体大小。我找到了文档 here.

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

我的问题是，如何更改可用的默认值 here。

我试过了

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

但它不起作用。

Answer 1

我发现更改正确参数的实际语法是：

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

但是，图标的显示仍然是通过 SCSS 控制的 (\@nebular\theme\styles\core\theming\_install.scss)。因此，我的建议是删除绑定并通过组件的 SCSS 更改您需要的任何内容。以下是每个 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

终于对我有用了

在component.scss文件中

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

如何应用主题或自定义星云图标？

How to apply theme or customize Nebular icons?

icons

angular

ngx-admin

nebular