Custom Icons (Phosphor Icons)

Ask us anything
1

I’m trying to add Phosphor Icons to WeWeb. (Phosphor’s site and Github)

What I’ve tried so far

  1. I used Statechange’s WeWeb Embed Converter to create javascript from Phosphor Icons’ script source and embedded that code into a before-app-load workflow.

    1
    12508×882 203 KB

  2. I added an HTML embed for an icon and set its height and width to 50px.

    2
    23932×976 125 KB

  3. I got the icon to show up by specifying the type of icon (e.g. thin, duotone, fill). Then you can add other properties like size as long as you do it with inline styling.

    3
    31756×726 57.6 KB

(4.) I tried uploading Phosphor icons files via the project’s Setting → Custom Fonts, but it broke something so now no fonts show up, not even the ones that were there earlier. [WeWeb currently has a support ticket open for this. I’ll update this post when addressed.]

Note
The downside of using icons this way rather than uploading the entire icon library seems to be that they can’t inherit the states of parent elements - e.g. icon is in a button and should change color on button:hover. Depending on use cases, that’s a big downside.

Ultimate Goal
Use all of the Phosphor icons with the ability to set properties based on a parent’s state.

1 Like
2

have you tried following this method using the font files?

1 Like
3

Does Phosphor icons have HTML characters for the icons? I can upload the set up the font in WeWeb using the .woff file, but I don’t see the character to copy/paste into the text field. I tried just setting the text value as the name of the icon, but it didn’t work.

CleanShot 2023-05-24 at 17.12.40@2x
CleanShot 2023-05-24 at 17.12.40@2x2404×626 107 KB

4

I’m not at my desktop now. Did you have a look at this?

5

We discussed this problem on the statechange community too. I made a video showing how to use the imported version via the statechange weweb embedder using standard weweb components to give more flexibility (rather than the HTML embed, which is harder to work with)

1 Like
6

I made a second video showing how we can integrate this with the weweb built-in icon element because sometimes its easier to show than tell: Adding External Icons to Weweb - Descript

3 Likes