Weweb icons library

Ask us anything How do I?
1

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.

2

I use material Icons and look them up in there search rather than wewebs to find the names

3

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.

image
image394×695 29.5 KB

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

2 Likes