[Fixed] How to display custom icons on ng2-smart-table?

Issue

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:

enter image description here

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

Solution

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

Leave a Reply

(*) Required, Your email will not be published