What is the process for showcasing personalized icons on ng2-smart-table?

I'm encountering an issue where I am unable to show custom icons on the actions tab using ng2-smart-table. I have successfully installed the Eva Icons created by the Akevo Team and would like to incorporate them into my project. I attempted to change the edit button to display custom icons, but unfortunately nothing is appearing. Specifically, I was expecting a brush icon to appear next to the delete option.

Below is an image showcasing the problem:

https://i.sstatic.net/WJ1HK.png

Here is the code snippet in question:

 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'
      }
    }
  };
cssangularng2-smart-tablenebularngx-admin

Answer №1

Give this a try:

configuration = {
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
}
...
};

Hopefully, this solution will meet your needs!

Answer №2

Another option is to incorporate different icon sets such as material icons. Simply integrate it into your project and modify your preferences like so:

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

Answer №3

configurations = {
    displayHeader: false,
    sortData: true,
    tasks: {
      alignment: 'left',
      addTask: false,
      editTask: false,
      removeTask: false,
      selectTask: false,
      customTasks: [
        {
          name: 'viewItem',
          type: 'html',
          label: '<i class="far fa-file-alt" title="View Item"></i>',
        },
        {
          name: 'editItem',
          type: 'html',
          label: '<i class="far fa-edit" title="Edit Item"></i>',
        },
      ],
    },
    categories: {
      category1: {
        title: 'Category 1',
        dataType: 'string',
        widthValue: '35%',
      },
      category2: {
        title: 'Category 2',
        dataType: 'string',
      },
      category3: {
        title: 'Category 3',
        dataType: 'string',
      },
    },
  };

Answer №5

let userPreferences = {
           displayMode: "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,
           },
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}> <Modal.Header closeButton> <Modal.Title>Check out our latest items!</Modal.Title> </Modal ...

cssreactjsbootstrap-4bootstrap-5

implementing the reuse of form control names for multiple dropdowns in an Angular application

When using the dropdown menu, I am facing an issue where selecting a value from the second dropdown makes it disappear. This is because both dropdowns are using the same formControlName to pass values to the backend with the same header. How can this be fi ...

angular

Stop the card from growing within a deck of cards

I encountered a problem with my card-deck layout that I need help solving. Despite wanting to maintain the same adaptive width for the cards, when there are 5 cards in a row, the last two cards end up taking up the full width of the container. Here's ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for including a permanent button at the bottom of a material ui dialog box

I want to implement a dialog popup in my react js application. When the user clicks on a button, the dialog should open up. Inside the dialog, there is a form with input fields. After the user fills out all the inputs, they can submit the information by cl ...

javascriptcssreactjsmaterial-uidialog

scribbling at the heart of the page

I have been struggling to get this text centered using the following code: echo "<div class='pagination' align ='center'>"; Unfortunately, the text still appears on the left side. How can I properly center it? Additionally, I h ...

phpcss

Resolving compatibility issues between FullCalendar and Angular 8

Encountering an issue in the console while using Angular 8: The error message reads: Module '../../../../../../../../node_modules/@fullcalendar/angular/fullcalendar-angular' has no exported member 'CalendarOptions'. Past solutions inv ...

angularfullcalendar

Utilizing Services in Angular 2

I am new to learning angular2 and encountering an issue with calling a service. The service call is successful, but I am unsure how to handle the data. In Angular1, we would handle it like this: DemoService.getExchangeDataConnection().then(function(respon ...

angular

What is the best method to input 0 when ngModel is undefined in Angular version 6?

<tr *ngFor="let item of capturaDiaria.inventarioList; let i = index"> <td> <input type="number" class="form-control" [(ngModel)]="item.kg_blanca" name="blanca-{{i}}"> </td> </tr> Initially, if the user hasn't entered ...

angulartypescript

The Bootstrap div element and its nested navbar are failing to expand to the full width of the page

I am facing an issue with some space appearing between my navbar and the edge of the viewport. The navbar is enclosed in a div with a container-fluid class, and upon inspection, I couldn't find any padding or margin that could be causing this spacing. ...

htmlcssbootstrap-4navbar

The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue? Below is the code snippet: <nav class="navbar na ...

htmlcssbootstrap-5

Zurb Foundation - Building a personalized form, but encountering issues with post creation functionality

After integrating Foundation Forms into my website to create a form, I am facing an issue where the post is not being created. Below is the HTML code snippet: <div style="padding-bottom: 5px; padding-top: 10px;"> <label> <h3><sma ...

htmlcssdjangoformszurb-foundation

What is the recommended service to call in an Angular unit test?

Greetings! Currently, I am in the process of writing unit test cases using Jasmine. My focus lies on interacting with various restful APIs within my components. The specific functionalities I am testing include deletion and addition of users. To facilitate ...

angularjasmine

Trouble in Bootstrap design arises when adding extra space causing layout to break

I am trying to add padding or margin between columns. However, whenever I set it in css, the columns end up breaking down. Here is the HTML and CSS code: Currently, without any margin, the 3 columns are displayed correctly but with no space between them ...

htmlcssbootstrap-4

Modify the style of .asp files (CSS)

I need to change the orientation of an .html page using a .css file, but I only have access to the .aspx file and not its code. The challenge is that the .css file is loaded dynamically from an .axd file. How can I go about changing the .css file in this ...

c#cssasp.netaxd

What is the reason behind the alignment of Bootstrap's navigation dropdown menu to the right?

Having an issue with my bootstrap dropdown. It seems to work fine, but once I navigate to a page through the menu, things start to look weird: As shown in the image, the menu appears displaced to the right. Here is the code snippet: <div class="navba ...

csshtmltwitter-bootstrapdrop-down-menualignment

What is the correct procedure for updating data when utilizing a service to transfer information between two components in an application?

As I work on transferring data from one Angular component to another, everything seems fine in terms of displaying the data until I attempt to edit or update it. Despite adjusting functions, the issue persists, indicating a potential problem with my data ...

angulartypescript

Can we incorporate Inline-CSS code (such as style="color:ffaa00;font-family:times;") in the Google Glass Mirror API?

When creating HTML in the Google Mirror API, is it permissible to incorporate CSS styles like this: <h1 style="color:#ffaa00;font-family:times;"> Is it acceptable to utilize custom colors and webfonts? It seems to work in the playground but I am un ...

csscolorswebfontsgoogle-mirror-api

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

angular 17 standalone component utilizing ngrx-store-localstorage

In my angular 17 project, I am utilizing ngrx-store-localstorage to persist my store in localstorage using the new standalone method. Here is how I set up my meta reducer: export function localStorageSyncConfig(): LocalStorageConfig { return { keys: ...

angularngrx-storeangular-standalone-components

Two-way binding with Angular2's NgModel can encounter issues

After executing a GET XMLHttpRequest against a service, I received the following JSON payload as a response : {_id: "5aa1358d32eba9e34dd9f280", source: "Avengers", target: "Iron Man", enemies: "Actor"} Within my src/app directory, I have defined the obje ...

javascriptangular