Forum Academy Marketplace Showcase Pricing Features

Plugin: Iconify by pticon

Thread dedicated to Iconify plugin



Hello @rico.trevisan ,

Apparently bubble used my email Alias as the name, that’s why you could not have find me as @pticon. But here we are. Thank you for using this plugin and let me take a look on your points (CSS/JS Timing + best practices)

  1. I’ve just create new thread dedicated only to Iconify plugin (as you can see, please let’s continue our chat here)
  2. Since all over Iconify website the creators mention v. 1.0.7, am using this one. Honestly I had no clue, the v.2 exists and what I found, even documention is not backward compatible, so I can try at least what will happen once I change the JS source and I will test it when I will have enough time (I did not touch this plugin since it fulfilled my personal requirements)
  3. Surely I can upgrade even the API, this update came after creation of this plugin
  4. I just found out, even the Demo page link is set in plugin, there is no link on plugin page, so here it is ( You can see there I do not recommend using this plugin in repeating groups, because the behaviour is unpredictable even though this plugin works well in RGs on my demo page and either in my project (not published yet). I was not even able to reproduce the issue on 100%, it happen sometimes while calling icons from nested/refrenced tables.

  5. Regarding to the BUG you have, how do you call the Icons? Because clearly the text comes empty to the properties.icon.
  6. Timing is bit complicated when writing the bubble plugin ( . I’ve spent lot of time by searching how it works and did not found any answer. Bubble promises when the plugin expects data, it fires asynchronous action, but honestly, I feel like it does not work and I’m not the only one.

Because I’m not the real developer (I’ve learned JS basics just to write this plugin) I’m opened to any suggestions about the code. This is also the reason, why the code is Open Source.

2. JS cannot be replaced, all Icons disappear, so it’s really incompatible.
3. API cannot be upgraded because it impacts the behaviour (I did a quick test), so I’ll let it as it is and try to upgrade it once I’ll have more time to dive in.

1 Like

I noticed the following if I set the name dynamically I get:

The Iconify plugin / Iconify element threw the following error: TypeError: Cannot read property ‘trim’ of null
at eval (PLUGIN_Iconify-update–Iconify-.js:11:32)
at (please report this to the plugin author)

In this case name is being dynamically loaded into a Set Custom State on page load and I’m using a reusable element.

But I found that if I set a default value in the name it doesn’t give the error and loads the correct icon dynamically. Apparently it seems that at the time of loading it still doesn’t have the value and gives the error. That’s why setting a default value doesn’t happen.

I see, honestly if you take a look on my previous post in this thread in point 6 I am writing about Timing complexity in bubble. In Bubble documentation you can find a mention, that bubble fires the javascripts when the data is available, which from my perspective is not true. So what are you experiencing is something I just cannot handle. The data is being recieved too late or the icons javascript is being fired too soon. Also I have captured, that the javacripts actually fires several times during loading - so my question is, do you see the icon you are trying to call when the whole page is loaded? If so, I would just add condition that the trimming will not be applied on empty value.

Hi @dave.kolaja !

Continuing our conversation in plugin page about the iconify element being inside of an clickable group, I reviewed the plugin code and I think I can help! Is it possible to allow forking the plugin?

Hello, send me a private message with your registred email address and I’ll add you as plugin editor.

Hi! I need to display country flags. I recorded all countries in option sets. Flags, via icon values: emojione-v1:flag-for-japan
I load the data dynamically.
The icon is visible only if the page is reloaded before.
can someone help me with this? I want the icon to be visible without reloading the page. - first page load and after reload the page - no page reload

Hi, unfortunately iconify plugin fires only once during page load. Which means, if the icon name is not available at the start, the original iconify.js will not call it from its servers. This plugin does not use API to retrieve icons, that’s why even users on free plan can use it. However I’ve managed to make a WORKAROUND, but bear in mind I strongly DO NOT RECOMMEND to use Iconify plugin in repeating groups, since sometimes I was experiencing unexpected behaviour.