How do I import images to be icons?

[jessefarquhar48]

Currently I am just using images as icons but the important issue here is that i obviously cannot dynamically modify the icon and icon colour … because it’s not an icon … it’s an image file. Is there a way to import an image and have the colour change if conditions are true (i.e. what we can already do with the default bubble icons).

The only alternative i have in mind is very impractical: have literally 30 image on top of each other (hidden) and dynamically display the needed one.

Or (just had thought while writing this) i could upload all the images to a option set (not ideal though) then have my RG pull up the relevant image from the Option set. this issue with this though is that i still don’t get to modify the colour dynamically (because it’s still not an icon to bubble).

thoughts?

[boston85719]

Importing SVG icons to your Bubble app

I usually got icons from thenounproject.com when downloading the svg icon I would then open the icon in a text editor to get the HTML code of the icon…then I would store that text value in my database (usually as an option set)…then I’d use an html element to load the icon referencing the HTML code saved as an option set. was able to do color changes by doing find and replace. here is a link to the thread I learned the trick from

[jessefarquhar48]

@Importing SVG icons to your Bubble app

I usually got icons from thenounproject.com when downloading the svg icon I would then open the icon in a text editor to get the HTML code of the icon…then I would store that text value in my database (usually as an option set)…then I’d use an html element to load the icon referencing the HTML code saved as an option set. was able to do color changes by doing find and replace. here is a link to the thread I learned the trick from

This website should help me out heaps, thanks @boston85719. If you could share some screen shots of some of the things you mentioned (DB and HTML code examples) that would help me get my head around it. Cheers.

[jessefarquhar48]

Does this only work if you use the icons from this website? What if i had my own SVG image, can i modify the colour of the image in bubble?

[boston85719]

@jessefarquhar48

What if i had my own SVG image, can i modify the colour of the image in bubble?

Should be fine, just need to alter the color setting.

Font Awesome 5 support

@ryanck the bonus in the Option Set SVG icon approach is that when displaying the icon you can Get an Option: AppIcons: MyIcon:find & replace and replace #000000 with whatever colour you need based on your primary colour or the status of the icon (enabled, disables, pressed). In fact I tend to replace the color embedded in the SVG with #color then I search for that and replace accordingly.

[patricia]

Yes that’s it @boston85719 I hope you can make it work @jessefarquhar48 It is easy to do and extremely powerful.