Custom actions with icons overlap

Hi All, I am having major issues getting custom actions to render, can someone please help?

I have set up my settings like so:

  settings = {
    actions:{
      add:false,
      edit:false,
      delete:false,
      custom: [
        {
          name: 'accept',
          title: '<i class="nb-checkmark inline-block width: 50px"></i>',
        },
        {
          name: 'deny',
          title: '<i class="nb-close inline-block width: 50px"></i>',
        },
      ],
    },
    columns: {
      mmsi: {
        title: 'MMSI',
        editable: false,
      },
      state: {
        title: 'State',
        editable: false,
      },
      vendor: {
        title: 'Vendor',
        editable: false,
      },
      userid: {
        title: 'UserId',
        editable: false,
      },
    },
  };
}

this produces:

I found on another issue that someone had added the following CSS to override the defaults:

:host ::ng-deep tr .ng2-smart-actions{ display: flex; }

:host ::ng-deep nbng2-st-tbody-custom {display: flex;}

:host ::ng-deep ng2-st-tbody-edit-delete a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-create-cancel a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
    display: inline-block;
    width: 80px;
    text-align: center;
}

But this produces this output:

The buttons are not aligned, the actions border is messed up, and the other columns on the actions look like they are 1 pixel out.

Please, does anyone know how to resolve?

[Whisper40]

@michabbb Thanks for your solution !

The same thing for the right side ( with a perfect display without border 😉 )

.order-table {

  thead th.ng2-smart-actions.ng-star-inserted {
    width: 1em;
  }

  td.ng2-smart-actions {
    float: right !important;

    ng2-st-tbody-custom {
      float: right;
      width: auto;
      display: flex;
      margin-top: 0.5em;
      margin-left: 1em;

      a.ng2-smart-action.ng2-smart-action-custom-custom {
        margin-right: 0.5em;
      }
    }
  }
}

.nb-theme-default ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child){
  border-right: 0px;
}

[Danielitouci96]

I have the same problem, some answer to this, the one from jupmorenorde I improve it, but it keeps staying like this…