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:
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.