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:
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.
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:
fill="currentColor"
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.
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.
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
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 SVGviewer.dev useful for working with SVGs as I develop in Webflow.
