Centralizing icon definitions

💬 App Building
1

I have a bunch of Retool UI components that use the built-in icon feature. E.g.,

image

(ignore the {{ephemeral_lcliz_cache.value[...}}, that's just a localization hack). The important thing here is the icon. It's defined here in the usual Retool way:

image

But! I have these all over the UI. Unfortunately Retool does not allow me to define a row action in one place and then apply it to many different tables...:roll_eyes: That's why these definitions are all over the place. So, I decided to "tidy-up" the code a little bit; to make it easier to change an icon at some future date. I defined this:

image
image816×435 31.4 KB

And this works. Where I must specify an icon I can do this:
image

And the correct icon will appear in the UI at runtime. Unfortunately in the IDE the icon is NOT displayed. A box is:
image

I did the top two, and then stopped, because I am thinking "...not having a nice preview inside the IDE will be a pain."

Especially since the string part of the control is obfuscated by my gross localization hack.

Surely this is a bug that will be fixed soon? :slight_smile:

2

Without looking into it, just a guess.

Could the URL for the icons in the IDE be different?
If it is, then switch the base url if the page url contains "edit"

e.g. retool.com/editor/resources/icons

3

The root cause of this is actually a CORS issue and specifically tied to the fact that the icon is being loaded dynamically.

image
image890×330 52.6 KB

I've documented it internally and will provide an update here as soon as I have news to share!

4

Bravo!