How to preview new google material symbols in webflow?

So Google updated their material icons and even changed the name, now it’s material symbols.

There’s two ways that I know to use icon fonts in webflow:

  1. link them with custom code in the head of the document and then use an html embed to make the icons. The problem is that this way the icons are not rendered in the preview, forcing me to publish and refresh the website to see if they look okay.
  2. upload the font as a custom font and just pick that in the font selector when you want to use an icon, which is what I’ve been doing with material icons.

Now the problem is that the new symbols file is very large, like 6mb, not sure why, must have something to do with the fact that it’s a variable font. But I would like to preview them in webflow’s preview…

do any of you have found a way to do this? any suggestions? thanks

Are you needing to use every single one of the icons or are you just looking to use a handful across the project? I’d assume it’s the latter, so my recommendation is to just use SVGs instead.

Clicking on any of the icons in the list on Google Font’s Icon page will open up a drawer that gives you the ability to download the SVG that you can either upload as an image (if you don’t need to alter it’s color/weight) or via an HTML Embed element:


well that is a way for sure, but it’s clunky for other reasons. The font is a lot more versatile. You can change its color in a pinch, just to name one, and make transitions or the likes… i’d be happier with a way to use the font and preview it

You can do this very easily with SVGs within an HTML Embed element as well — just make sure you set the fill (or stroke, depending on the icon type) to “currentColor”. This will pull the color from the font color and allow you to change it based on the background color or with transitions:


In my opinion, loading a 6mb font file to use a handful of icons is much more clunky — but it depends on the project in question.

how do you use a downloaded SVG as an html embed?

Just open the SVG in Notepad (Windows) or TextEdit (MacOS), copy the code, and paste it within the Embed element field:

Just make sure that the stroke or fill — whichever the icon uses — is set to "currentColor" (like above). This will pull the color from the text color on the element itself.

1 Like

got it, thanks.
unfortunately this wouldn’t preview in webflow’s preview I suppose, so that’s not exactly what I was looking for, but thanks for the tip

Hi Armaflow,

Embedded SVGs actually will work in the live designer if they are put in an embed within the site! I use them frequently with that very currentcolor trick mentioned by mikeyevin.

As an aside, I’ve found useful for working with SVGs as I develop in Webflow.


Just like @heycorgi mentioned, these will preview in the Designer as long as it’s an HTML Embed element :+1:

1 Like

that worked, thanks. I recall exploring svgs as html embeds before but for some reason they didn’t work for me at that time, weird.