Bonus (not tested yet): You can create a json to have it available in the picker element, from my understanding all you need to do is create a json array like so:
Then you need to host it somewhere, I suppose you can upload it directly to your app under files.
It will be a long manual process, but then you will be able to just select icons in the editor.
If anyone knows a good way to generate this json dynamically that would be very helpful and time saving!
You can upload that to ChatGPT with advanced data analysis mode on, upload the CSS file and ask it to generate the JSON. Uploaded the fonts in WeWeb and now have visual icons selection!!
@AJAW thanks for sharing! given that you are storing all the font files yourself, is there still a need to fetch the icons with the unpkg script on app load? This may be redundant, but not sure.
Would you know if it’s possible to do this with Google’s Material Icons? I’ve been pulling my hair out trying to figure out how to make them work in the icon section
Its the same process really, here you have a github repo with material icons css and fonts.
You can just install these fonts in your weweb settings → files
Then you need to construct this JSON array that maps the name of the icons to its class, have a look above at how I achieved this with chatgpt.
Here you put
Name: Material Icons - Regular/Filled/Whatever
Icons file URL: URL to the .woff2 file you uploaded to weweb
Icons List URL: The JSON mentioned above, this is the hardest part, look here how I made this: Generate Phosphor Icons Array
Hi, @AJAW! Do you have any idea how to import flat-color-icons like this? Tried it, but flat-color-icons have no font, just an iconify lib that doesn’t work this way. There is another ptoject, @iconify-json/flat-color-icons, but I still didn’t succeed.
That’s very cool, but also it feels like WeWeb should have a more straightforward way to upload custom icon sets? Can we make that a feature request?
Icons should be in Library. If the lift to make a more simple import is too much - someone needs to just take the 10 most popular open source icon libraries and make plugins to install. It’s kinda insane that building custom components is now easier than just getting icons into the editor.
Lol!! It’s funny and also sad we high-five each other for …. successfully importing icons. Someone really needs to build a plugin if the WeWeb team can’t make adding fonts easier.
how did you make it work? I uploaded the otf and some test json in the same format as above but with md class and it didn’t work. Can you please give me the json file? Please I’m begging you.
