Hey everyone, i want to be able to bind my icon to a few options from the icons library, but it’s really hard to figure out the names of the icons for the binding. If someone has a solution, I would really like to hear.
I use material Icons and look them up in there search rather than wewebs to find the names
Hey Tomerer,
You have 2 options to do this. Fortunately, but work pretty much the same way.
Option 1 - Icon Element (Currently Maintained)
- Create a component that takes a String as a Parameter / Input.
- Place an Icon Element inside it.
- Bind something like:
{{library_identificator}}/{{icon_name**(string input value)**}}in the icon’s value.
NOTE: If you select the icon instead of binding it you will see the following popup. Using the list view, you will see the values you need: e.g., for Phosphor Library
Drawbacks? Currently only one icon in the DOM will be visible upon app deployment.
Fix? See option 2.
Option 2 - Icon Element (Deprecated (but perfectly functional))
- Create a workflow that runs On App Load.
- Create a Custom Javascript node in the workflow.
- Paste this in the code to import the Phosphor Icon Library when the App Loads.
if(!window["scp-loading-15897517-8d61-48d2-867a-87021c779f08"]) {
window["scp-loading-15897517-8d61-48d2-867a-87021c779f08"] = true;
let doc;
/* Adding script from https://unpkg.com/@phosphor-icons/web */
doc = document.createElement('script');
doc.src = 'https://unpkg.com/@phosphor-icons/web';
document.body.appendChild(doc);
}
NOTE: Done using https://weweb-embed.statechange.ai to Convert Javascript and CSS Tags to Weweb Actions and the Current Phosphor Unpkg file (https://unpkg.com/@phosphor-icons/web).
- Create an component that takes a String as a Parameter / Input.
- Place an Icon Element (Deprecated) inside it.
- Bind something like:
"ph ph-"+{{icon_name}}in the icon’s value.
And that should be it!
Here are the links for the common icon libraries where you can also find the names for each icon.
I changed to the current version when it came out, but due to the “only one icon is visible on deployment” thing, I switched back. Having an Icon Component was a huge plus, because I just changed a bit of the binding in it, and all the icons in the app started working again.
Hope this helps.
Best,
Bruno
3 Likes
hey @Bruno,
Thanks for the help, I tried the second option, I added the code to two pages where it is most relevant. But it still doesn’t work, I also added a picture of the icon i used maybe the mistake was there.
