Google Material Icons

Code Toolkit
Written By Squarestylist Support

What You'll Create

Google Material Design icons displayed as text links anywhere on your site. Use icon names as link text and they render as scalable vector icons.

The Problem It Solves

Squarespace has limited icon options, and custom SVG icons require manual upload. This technique gives you access to Google's entire Material Icons library - thousands of icons - using just text links and CSS.

Perfect For

Feature lists, Navigation enhancements, Service icons, Button decorations, List markers, Interactive elements.

What Makes This Different

The Material Icons font is loaded via Google Fonts. CSS targets links with 'googleicons' in the URL and applies the icon font styling. Simply type the icon name as link text (like 'favorite' or 'home') and it displays as an icon. Multiple icon styles available: Filled, Outlined, Sharp, Two Tone.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS

  • Prerequisites: Material Icons font link added to header code injection

  • Toolkit Title: Google Icons

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Typography Accent Elements
Next

Index Table from Lists