I want to use google material icons

[hiroto]

Hello.
I want to use google material icons, how do I import them?

I’d appreciate detailed instructions on how to go about it!

[Slavo]

Hi @hiroto, there are a few ways how to do this but here is the way I prefer - you can add the material icons as a font to weweb.

1. Go to the Google Icons Github page: material-design-icons/font at master · google/material-design-icons · GitHub.

2. Download the font files - these are the ones with the .ttf and .otf extensions.

3. In your weweb project, go to your Design System and select Fonts.

4. Select “Add Font”

5. Select Upload Font

6. Upload all the Material Icons font file you downloaded from GitHub in step 2 above. Give each font a different weight - it will make no impact on the icons but it will allow you to use the different icon sets in your project under the custom Google Font.

Now you have the font loaded and you can use the icons in your weweb project. Here is how:

1. Add a regular text element to your application

2. Select the element and make sure you select your custom Google Font for it.

3. Go to Google Fonts and select the icon you want to use. Let’s say you want to use the “Schedule” Icon. Copy the name of the icon in the panel on the right.

4. Paste that text into your project, into the text element.

5. And there you go - as long as the text element is your custom Google Font, it will display the Google icon.

Yes I know, it is quite a few steps - but once you have the icons set up as font in your application it is just a question of copy and paste the icon name into your project as a text element. And you can style those icons like any text so it is very powerful.

[Joyce]

Here’s a short video by @visualdevs showing how to import icons in WeWeb.

[Jack]

Thanks all! Just adding that now you can import the Google Material Symbols via the google fonts API, so you no longer need to download the files and upload them to WeWeb. Super quick and easy.

Jack

[AJAW]

Can you use those icons for button left/right icons?

[Jack]

Has anyone figured out how to swap the Google Material Symbols from an unfilled state to a filled state dynamically?

There’s a handful of references on how to do it with traditional code (here and here), but unsure the best way to implement it in WeWeb.

Primary use case: symbol (which I have configured as a text element with the Google Material Symbols font) changes to a filled state on hover.

Thanks!
Jack

[Joyce]

Mmm I haven’t tried it but probably not because:

• you’re importing a font with this method, and
• you can’t add a text element inside the button at the moment

There might be a workaround but can’t think of one right now

[Anna.fae]

A question here, If there will be 10 fonts connected (for example using icons from different fonts) are all fonts will be loaded on page each time?

Or if I have few icon fonts connected but Im using just 1 font are other fonts still loaded on page right?
Same if I have added to library 20 google fonts are they all will be loaded?

This question is about speed optimisation.

[Jack]

@Anna.fae To my understanding, the fonts will be loaded on first load page load, then cached.

The screenshot of my network tab with the cache disabled shows the initial download via Google Fonts API is very small anyways. Hope this helps.

Jack

[mark]

How do you make the icons filled?

[Zacharyb]

Personally , I just use phosphor icon script in the header , when I want to add a new icon I just use the naming like « ph icon- name » as a replacement of an basic icon.

Might not be still the best way now but I kept doing it
Uploading at the time seemed to me too heavy since I use only a few icons

Works like a charms and need just a one time code snippet script to add to a header project
And look for the icon I want in phosphor site

[Zacharyb]

at least it’s don’t impact too much loading i guess !

[dorilama]

That script inject 6 css files. All of them are around 538kB before compression.
You can also load directly only the css of the style you use.