Material icons on CMS

I am trying to put a different google material icon in the CMS. I have added an html embed to the page, and added the google webfonts html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

in the CMS I am putting the iclass

cast

I feel like I am almost there (been playing around with various bits of code from the forums) but not there!


Here is my site Read-Only: Webflow - Sebacic

(how to share your site Read-Only link)

1 Like

Indeed!

Put your code here with no script tag:

image

You can also put it in the Custom Code tab of your site settings and it will affect all pages sitewide.

Then on your custom code Embed block in your collection list or wherever, you just put the CMS variable for the icon.

Of course, it only works when published because the google font is only loaded when the site fully loads.

Hello @Jonathan_Holden and @vincent ,

I got the material icons to work on a project, however I did in a different way. I placed the code on the before </body>tag space, I used the class material-icons, I think you have to use this class, and then I just typed what is the equivalent in words for the icons.



So for example, I had a paragraph element with a class of material-icon, I wrote star half, and when I published instead of the words I got the star icon. I hope this helps.

2 Likes

Vincent and Pablo that is AMAZING!

This code in the page code (Project settings > Custom Code > Head code)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

then the word for the material icon, for example “search” “delete” or “face” (find them here: Material Symbols and Icons - Google Fonts)

and the Style “material-icons” in the Selector

It works perfectly, and you can change the style color by adding a sub class. Other styling changes work too, for example size.

2 Likes

Thanks Pablo - that is genius. Works a treat and the simplest icon solution I’ve seen.

1 Like