cssangularng2-smart-tablenebularngx-admin

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


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