Can I use a custom image as a row action icon?

  • 2
  • Question
  • Updated 3 years ago
  • Answered
Is there a way to use a custom image (e.g. a logo image uploaded as a static resource in Salesforce) as the icon for a row action? The idea is to use an image that is not a part of the SKUID silk icon set:
Photo of Trey Alexander

Trey Alexander

  • 222 Points 100 badge 2x thumb

Posted 3 years ago

  • 2
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi,

I played with Merge syntax and just specifying an URL of an image in the Action icon input field -- no dice.

So I opened Chrome developer tools and inspected the row action:
nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible sk-icon-ed
it editrow
It appears that the Action icon is really a CSS class.

Given this, with a little CSS, you could use you own image.

.my-css { content:url("...... your image url......") }

set the Action icon to "my-css".

Regards,
Irvin



Photo of Trey Alexander

Trey Alexander

  • 222 Points 100 badge 2x thumb
Am I missing something?

Below is the CSS in-line snippet:

Here is the Action Icon set to "my-css":

Should show this image as the row action icon:
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
This URL worked for me: 

https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Esperanto_star.svg/120px-Esperanto_star.sv...

Maybe create a static resource for your image instead e.g.

Upload the image as a static resource name green_star.  Change the CSS as follows:

.green-star { content:url(/resource/green_star); }
Photo of Sharon Anoop

Sharon Anoop

  • 232 Points 100 badge 2x thumb
Irvin, the solution you've given works fine in chrome but content property is not supported in IE and firefox. Can you suggest any change that can be made to make it work?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Hmm.  This CSS reference seems to indicate that it is supported in IE (8+) and Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/content

Make sure you have the syntax right...