Icons

Use icons

Important! Make sure to have Custom Code (must be on every page) symbol on each page to display the icons. This symbol contains a necessary code to display Material Icons in Webflow and published pages.

Replacing the icon

Go to https://fonts.google.com/icons?selected=Material+Icons

Search for the icon you want to insert.

Select the icon and click on the copy icon under icon name in the right panel, for example 'account_circle'.

Select the 'Icon Small' symbol on the canvas.

Paste the icon name from clipboard in the Instance Overrides panel on the right.

Try it out

Select the icon below and change its name from star to face in the Instance Overrides panel on the right.

star

Customize

Changing the icon theme

Click on the icon: account_box

Rename Material Icons class to the name of desired theme: Material Icons Outlined , Material Icons Round , Material Icons Sharp

Changing the color of the icon

Simply apply the text color class to the icon. For example C T Error-60

Try it out

Select the icon below and add a class C T Error-60 to it.

star

Use icons

Replacing the icon

Try it out

Customize

Changing the icon theme

Changing the color of the icon

Try it out

Icon Components