How to fill Google Icons?

Hi, I have google material icons uploaded as a font but I cant figure out how to get the filled version of an icon. Any help would be appreciated, thanks!

Mmm not sure about this. Let me ask around and get back to you on this one :slight_smile:

Hi Mark, you can use Material Icons in WeWeb in several ways. Google is not making it easier by introducing Google Symbols in addition to the Icons but that is perhaps for another post. Let’s focus on your question for now - using material icons as fonts, and you are looking for the “filled” icon version.

  1. Navigate to https://github.com/google/material-design-icons/blob/master/font/MaterialIconsRound-Regular.otf
  2. Download the otf file to your device
  3. Upload it as a font to your WeWeb project
  4. In your project, add a text element.
  5. Bind the text element to the name of the icon. In the example below, I am using “check-circle”.
  6. Select the font you just uploaded.

And voila!

3 Likes

Odd thing here, I’m noticing anything with an underline does not work. Single word icons do appear.

Any idea why?