如何在ng2-smart-table上显示自定义图标？

Question

我无法在 ng2-smart-table 的 actions 选项卡上显示自定义图标。我已经安装了来自 Akevo Team 的 Eva 图标，我想使用它们。我已经更改了编辑按钮以显示一些自定义图标，但问题是什么也没有出现。删除的左边，不得不出现一个刷子图标

这是一张有问题的图片：

代码如下：

 settings = {
    edit: {
      editButtonContent: '<nb-icon icon="brush"></nb-icon>',
      saveButtonContent: '<nb-icon icon="checkmark"></nb-icon>',
      cancelButtonContent: '<nb-icon icon="close-circle"></nb-icon>'
    },
    columns: {
      device: {
        title: 'Device',
        sortDirection: 'asc'
      },
      type: {
        title: 'Type',
        sort: false,
        filter: false
      },
      serialNumber: {
        title: 'Serial Number'
      },
      status: {
        title: 'Status'
      }
    }
  };

Answer 1

试试这个：

settings = {
hideSubHeader: true,
actions: {
  custom: [
    {
      name: 'edit',
      title: '<nb-icon icon="brush"></nb-icon>'
    },
    {
      name: 'save',
      title: '<nb-icon icon="checkmark"></nb-icon>'
    },
    {
      name: 'cancel',
      title: '<nb-icon icon="close-circle"></nb-icon>'
    }
  ],
  add: false,
  edit: false,
  delete: false
}
...
};

希望这对你有用！

Answer 2

我找到了这个帖子： https://github.com/akveo/ng2-smart-table/issues/1034

最后一条评论中提到：

temporarily use the old nebular-icons
https://github.com/akveo/nebular-icons/tree/master/src/icons

我下载了所需图标的 SVG 并将它们添加为：

settings = {
  edit: {
    editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
    . . .
  }
. . .
}

效果很好。

Answer 3

您也可以使用其他图标集，例如 material icons，只需将其添加到您的项目中，然后更改您的设置，例如：

 settings = {
    edit: {
      editButtonContent: '<span class="material-icons">mode_edit</span>',
      saveButtonContent: '<span class="material-icons">check_circle</span>',
      cancelButtonContent: '<span class="material-icons">cancel</span>'
    },
    /* ... */
 }

Answer 4

let newSettings = {
           mode: "external",
           actions: {
               add: false,
               edit: false,
               delete: false,
               position: 'right'
           },
           hideSubHeader: true,
           add: {
               addButtonContent: '<i class="nb-plus"></i>',
           },
           edit: {
               editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
           },
           delete: {
               deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
               confirmDelete: true,
           },
}

Answer 5

settings = {
    hideSubHeader: true,
    sort: true,
    actions: {
      position: 'left',
      add: false,
      edit: false,
      delete: false,
      select: false,
      custom: [
        {
          name: 'viewRecord',
          type: 'html',
          title: '<i class="far fa-file-alt" title="View Record"></i>',
        },
        {
          name: 'editRecord',
          type: 'html',
          title: '<i class="far fa-edit" title="Edit Record"></i>',
        },
      ],
    },
    columns: {
      column1: {
        title: 'Column 1',
        type: 'string',
        width: '35%',
      },
      column2: {
        title: 'Column 2',
        type: 'string',
      },
      column3: {
        title: 'Column 3',
        type: 'string',
      },
    },
  };

如何在ng2-smart-table上显示自定义图标？

How to display custom icons on ng2-smart-table?

css

ng2-smart-table

angular

ngx-admin

nebular