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

【问题标题】：How to display custom icons on ng2-smart-table?如何在 ng2-smart-table 上显示自定义图标？
【发布时间】：2019-11-23 22:54:51
【问题描述】：

我无法在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'
      }
    }
  };

【问题讨论】：

你找到解决办法了吗？

标签： css angular ng2-smart-table nebular ngx-admin

【解决方案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
}
...
};

希望这对你有用！

【讨论】：

它不起作用，首先它是空白的，然后在控制台上显示：core.js:7174 警告：清理 HTML 会删除一些内容，请参阅g.co/ng/security#xss
@DiogoFernandes 你找到解决方案了吗？

【解决方案2】：

您也可以使用其他图标集，例如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>'
    },
    /* ... */
 }

【讨论】：

如果您不想（或只是不能）将 svg 文件添加到您的 Angular 项目或试图避开 Nebular，则材料图标是解决方案

【解决方案3】：

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',
      },
    },
  };

【讨论】：

【解决方案4】：

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

正如上一条评论中提到的那样：

暂时使用旧的星云图标
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" >'
    . . .
  }
. . .
}

效果很好。

【讨论】：

【解决方案5】：

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,
           },
}

【讨论】：