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.
-
Go to the Google Icons Github page: material-design-icons/font at master · google/material-design-icons · GitHub.
-
Download the font files - these are the ones with the .ttf and .otf extensions.
-
In your weweb project, go to your Design System and select Fonts.
- Select “Add Font”
- Select Upload Font
- 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:
- Add a regular text element to your application
- Select the element and make sure you select your custom Google Font for it.
- 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.
-
Paste that text into your project, into the text element.
-
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.