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

Question

I can't display custom icons on the actions tab from ng2-smart-table. I have installed Eva Icons from Akevo Team and I want to use them. I have changed the edit button to show some custom icons but the problem is that nothing appears. On the left side of delete, a brush icon had to appear.

Here is an image with the problem:

Here is the code:

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

Have u find a solution? – Diogo Fernandes Mar 24 '20 at 21:43 — Diogo Fernandes, Mar 24 '20 at 21:43

NickCoder · Answer 1 · 2019-07-15T12:45:24.263

1

Try this :

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

hope this works for you!

edited Jul 15 '19 at 12:45

answered Jul 15 '19 at 12:39

NickCoder

1,504
2
23
35

2

It does not work, first it's blank, and show's on console:core.js:7174 WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss – Diogo Fernandes Mar 24 '20 at 21:29
@DiogoFernandes have you find a solution? – gfinotti Apr 29 '20 at 17:21

score 1 · Answer 2 · answered Feb 23 '21 at 09:44

1

Also you can use other icons sets like material icons, just add it to your project and then change your settings like:

 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>'
    },
    /* ... */
 }

answered Feb 23 '21 at 09:44

svyat1s

868
9
12
21

Material Icons is the solution if you don´t want (or just can't) to add svg files to your Angular project or trying to evade Nebular – Juanpa Nov 04 '21 at 20:55

score 1 · Answer 3 · answered Mar 22 '21 at 23:32

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

score 0 · Answer 4 · answered Aug 06 '20 at 05:57

I found this thread: https://github.com/akveo/ng2-smart-table/issues/1034

And so as mentioned in the last comment:

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

I downloaded the required icon's SVG and added them as:

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

Works well enough.

score 0 · Accepted Answer · answered Mar 07 '21 at 21:30

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

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

5 Answers5