Add icons in action column?

App Building
1

Hi any option to add icons to the action column?

image

instead of text add some nice looking icons?

thank you

PD: fixed by using this post Add image or icon in table action - #3 by minijohn

thanks !

1 Like
2

Easiest but with less flexibility: You can actually use emoji!
[WIN] + . on Windows, Command + Control + Space on MacOS

image
image2532×1164 232 KB

Or you can define custom CSS code as mentioned HERE, which provide a lot of possibilities

image
image2438×1397 303 KB

/*
// - rt-table-{{tableId}}
// - nth-child(x) is selecting the xth button
// - Last 2 instructions are to remove borders and are optional
*/
#rt-table-table1 .table-cell-action button:nth-child(3) {
  background: url(https://www.svgrepo.com/show/429765/banana-blackbarry-blackberries.svg);
  background-size: 25px auto;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 15px;
  box-shadow: 0 0 0 0 transparent;
  -webkit-box-shadow: 0 0 0 0 transparent;
}
4 Likes
3

thank you! works perfect

4

@rferland Awesome, thanks!

5

You can also use an icon object itself and bind certain actions to it. I have some icons that open hidden modals. It's much cleaner looking than the big modal buttons.

2 Likes