Use Google Material Icons in Your Squarespace Website
Intro
Icons are more than just simple visuals—they can enhance user-experience and make websites visually appealing. Whether guiding users through your navigation menu, highlighting key features, or adding a touch of style to your content, these tiny icons can have a significant impact.
With that in mind, Squarespace doesn’t offer a native way to add icons. So this guide will focus on implementing icons in your Squarespace site with the Google Material Icons library.
Why Icons Matter for Your Website
Icons do more than just beautify your site—they enhance usability and the overall user experience. Here’s how:
Improved Navigation: Icons help users quickly identify sections of your site. A shopping cart icon, for instance, instantly signals the checkout process.
Visual Appeal: Well-designed icons contribute to a modern, cohesive look that makes your site more engaging and visually attractive.
Space Efficiency: Icons convey complex ideas with a single image, allowing you to save space and reduce clutter.
Enhanced Readability: Icons can break up text-heavy content, making your pages easier to scan and more user-friendly.
Given these benefits, it’s clear that incorporating icons into your design isn’t just about aesthetics—it’s about creating a more functional, intuitive site.
Why Choose Google Material Icons?
There are countless icon libraries out there, but Google Material Icons has quickly become the go-to for many web designers, and for good reason. Here’s why:
It’s Free with Thousands to Choose From: Google Material Icons is a free resource, offering access to thousands of high-quality icons.
Design Consistency: You won’t have mismatched or awkward-looking icons disrupting your design.
Versatility: With thousands of icons to choose from, this library covers just about any symbol you might need, from common navigation elements to more niche symbols.
Customizability: Google Material Icons offer flexible design options, allowing you to adjust size, color, and even style (sharp, outlined, rounded, etc.) to match your brand.
Fast and Lightweight: These icons are optimized for performance. They load quickly, keeping your site running smoothly. And since most users browse with Chrome—which likely has these icons pre-installed—the loading time is even faster.
Compatibility: These icons are compatible with web design platforms, including Squarespace, making them easy to implement, hence why you’re probably here to find out how.
I personally prefer this library because of it’s high quality, and reliability. If you find a different icon library that you prefer, the methods outlined below may have some similarities, but make sure to follow any official documentation when provided.
How to Add Google Material Icons to Your Squarespace Site: A Step-by-Step Tutorial
Now that we’ve covered why Google Material Icons are a fantastic choice, let’s dive into adding them to your Squarespace site.
Prerequisites
Squarespace Version: 7.1
Subscription Plan: Business +
Knowledge: Basic Javascript, HTML, Web Inspecting, and good ol’ copying and pasting skills.
Blocks & Features Used: Code Block, Code Injection.
Access the Code Injection Panel Globally (The Entire Site):
Squarespace Dashboard > Select 'Pages' > Navigate to Website Tools > Open Code Injection
Access the CSS Panel:
Squarespace Dashboard > Select 'Pages' > Navigate to Website Tools > Open Custom CSS
For more detailed information about adding custom code, please see the Squarespace Help Page.
Step 1: Customize Your Icons and Add the Library
Visit the Google Material Icons Library: Head over to Google Material Icons to browse their extensive collection.
Customize Your Icons: Adjust the style, size, and color to fit your site’s design. You can choose between different styles like Outlined, Rounded, and Sharp.
Retrieve the Variable or Static Icon Font (Recommended) Link: Click on any icon and copy the link for either the Variable Font or the Static Icon Font in the side panel.
Use if you need to customize various styles.
Recommended
info Difference Between Variable and Static Icon Fonts
Variable Icon Font: A single file that adapts to various styles and weights (thin, bold, wide), allowing multiple variations without separate files. It offers flexibility for different icon styles.
Static Icon Font: Contains one specific style or weight, requiring separate files for each variation. Static fonts are simpler and often optimized for performance by loading only the needed style, which benefits site speed.
Why Choose Static Icon Fonts: Static fonts are lightweight and enhance performance by minimizing loading time. This is crucial for user experience and SEO.
Copy the Code and Paste it in the Header: Navigate to the Code Injection panel in your Squarespace settings and paste the code into the header section.
Step 2: Use the Icon Library into Your Squarespace Site
You can start using your icons! Make sure you take note of the font family name, as you will be using this in your CSS. This depends on your customizations in Google Material Icons. It will most likely be:
“Material Symbols Outlined“
“Material Symbols Sharp“
“Material Symbols Rounded“
—
Methods to Add Icons
There are several methods and creative combinations for adding icons to your Squarespace site. In this step, I’ll cover the following approaches:
Targeting Blocks: Target a block and swap out the text font with an icon from the library, transforming the entire block text into an icon.
Using a Code Block: Insert icons directly with the <span class="material-symbols-outlined(or sharp)">icon</span> tag.
Inside a Text Box: Replace the font of strikethrough, bold, or italic text formats with Google Icons.
Using :before and :after CSS Selectors: Perfect for adding icons before or after text when you can’t change the font of an element directly, such as in navigation menus or alongside button text.
These methods allow you to place icons exactly where you need them, while working within Squarespace's limitations.
—
Method 1: Target Blocks
Usage: Targeting entire blocks, you can replace all the text within a block with an icon from the Google Material Icons library.
When to Use: Ideal if you plan to use icons sparingly and in very specific locations.
How to Implement:
Choose Your Icon: Take note of the icon’s name.
Insert the Icon Name: Add the icon’s name to a text block, button block, or any other block where you want the entire element to display as the icon.
Get the Block’s Class and the Element Font Family to Replace:
Inspect the element using your browser’s developer tools to locate the .fe-block class (followed by a series of numbers). This class identifies the specific block you’re targeting.
Look for the element that is using the old font-family property. For example, if I’m targeting a button the <a> is the element to change the font-family property.
Alternatively, use my Chrome extension, PocketSquare, to quickly find the block’s class without opening the inspector tool. You will still need to find the element within the .fe-block that you’re replacing the font.
Add the Custom CSS:
Navigate to Custom CSS in your Squarespace dashboard.
Paste the block’s class and element class into the CSS panel, then customize it as follows:
/* LAZ-I.COM CHANGE FOOTER THEME */
.fe-block(...) .element-with-old-font-family {
font-family: "Material Symbols Outlined" !important; /* Or "Material Symbols Sharp" depending on your icon style */
}
This CSS snippet swaps the font for the entire block, turning the text into the icon you selected.
Using the Wildcard (*) Selector:
If you're having trouble targeting the specific element, you can use the * wildcard to apply the font-family to everything within the .fe-block:
/* LAZ-I.COM GOOGLE ICONS */
.fe-block(...) * {
font-family: "Material Symbols Outlined" !important; /* Or "Material Symbols Sharp" depending on your icon style */
}
warning Caution: This approach will change the font for all elements within the targeted block. It's best used when the block contains only one element you want to transform into an icon.
—
Method 2: Using a Code Block
Usage: Involves directly inserting Google Material Icons into your Squarespace site using a code block and the html code provided by Google Material Icon side panel.
When to Use: This method is particularly useful for seamlessly integrating icons into specific areas of your content without affecting the overall design.
Precision Placement: Ideal for placing icons exactly where you need them—whether above a paragraph, next to a headline—without altering surrounding text or design elements.
Styling Flexibility: Easily adjust the size, color, or alignment of the icon independently from other elements using additional styles or classes within the code block in Custom CSS.
Minimal Impact: Keeps your existing content and layout intact, making it perfect for adding icons where changing the entire font-family or using CSS selectors would be too broad or disruptive.
How to Implement:
Choose Your Icon: Copy the
<span>container for the icon from the side panel on the Google Material Icons website. The container will look something like this:
Insert a Code Block on Your Site:
In your Squarespace page editor, add a Code Block where you want the icon to appear.
Paste the
<span>code into the code block.This code will render the icon directly on your page.
—
Method 3: Inside a Text Block
Usage: Replaces specific text styles—like strikethrough, bold, or italics—with icons.
When to Use: This is ideal if you rarely use any of the text styles below and can easily repurpose it for icons, and you want a seamless way to include icons frequently throughout your site.
How to Implement:
Choose an option below that you can use to replace to icons
Copy the code and paste into the CSS panel
Option 1: Replace Strikethrough Text
/* LAZ-I.COM GOOGLE ICONS */
[style="text-decoration:line-through"]{
font-family:"Material Symbols Outlined" !important; /* Insert the corect Name */
text-decoration:none !important;
vertical-align:bottom;
}
Option 2: Replace Italics Text
/* LAZ-I.COM GOOGLE ICONS */
em {
font-family:"Material Symbols Outlined" !important;
font-style:normal !important;
text-decoration:none !important;
vertical-align:bottom;
}
Option 3: Replace Bold Text
/* LAZ-I.COM GOOGLE ICONS */
strong {
font-family:"Material Symbols Outlined" !important;
font-style:normal !important;
text-decoration:none !important;
vertical-align:bottom;
}
Once You've Chosen Your Text Style and added to CSS Panel:
Write Your Paragraph: Create your content as usual in a text block.
Insert the Icon Name: Replace the text you want to be an icon with the icon’s name (e.g., "home" for the home icon).
Highlight and Format: Highlight the icon name and apply the text style you chose (strikethrough, bold, or italics).
Preview: The text should now display as the icon you selected, styled according to the custom CSS you applied.
—
Method 4: Using :before and :after Selectors
Usage: This method is geared toward users with a solid understanding of CSS and experience using the code inspector. It's best suited for more advanced customizations, such as adding icons to your navigation menu, product categories, or other elements that are hard-coded into your Squarespace site. This approach requires a thorough inspection of your site’s code and familiarity with advanced CSS techniques like nth-child selectors, especially when dealing with lists of items.
When to Use: This method is ideal for adding icons to complex areas of your site, such as navigation menus or hard-coded elements that aren’t easily accessible via standard editing tools.
Here’s an example of a common need to add icons before text in the nav:
/* LAZ-I.COM GOOGLE ICONS IN NAV */
.header-nav-item a:before, .header-menu-nav-wrapper a:before {
font-family: "Material Symbols Outlined" !important;
vertical-align: bottom;
}
.header-nav-item:nth-child(1) a:before,
.header-menu-nav-item:nth-child(1) a:before {
content: 'shop'; /* Replace with the icon name from Google Material Icons */
}
.header-nav-item:nth-child(2) a:before,
.header-menu-nav-item:nth-child(2) a:before {
content: 'email';
}
.header-nav-item:nth-child(3) a:before,
.header-menu-nav-item:nth-child(3) a:before {
content: 'question_mark';
}
In this example:
Selectors: The CSS targets specific navigation items using :before to insert the icon before the text.
Nth-child: The nth-child selector is used to target specific items in a list, allowing you to customize each item individually.
Challenges:
This approach can be quite cumbersome, even for seasoned developers. It requires not only a good understanding of CSS but also the ability to troubleshoot and fine-tune the code, especially when working with dynamic content like navigation menus. Moreover, if you want to style the icons further (e.g., adjusting their position relative to text or adding animations), it demands advanced CSS knowledge.
—
A Simpler Solution for Adding Icons to Squarespace Navigation
While the advanced CSS method we've discussed works well for various parts of your site, many users specifically want to add icons to their navigation menu. However, this can be particularly challenging and requires advanced CSS skills.
To address this common need, I've developed a specialized plugin that simplifies the process of adding icons to your Squarespace navigation menu. This plugin eliminates the need for complex CSS coding and makes icon integration accessible to all users, regardless of their technical expertise.
Check out the details here:
Conclusion
Incorporating Google Material Icons into your Squarespace site can enhance its functionality and aesthetic appeal. By following this guide, you'll be able to leverage the power of icons to create a more engaging, user-friendly website that stands out from the crowd.
Remember, the key to effective icon usage is consistency and relevance. Use icons that align with your brand and enhance your content, rather than distract from it. With these tools and techniques at your disposal, you're well-equipped to take your Squarespace site to new heights of design excellence.
Thanks for reading!
FAQ
Q1: Can I add Google Material Icons to any version of Squarespace?
A1: This guide focuses on Squarespace version 7.1 with a Business or higher subscription plan, which allows code injection. If you're using a different version, some steps may vary, and certain features like code injection might not be available.
Q2: Do I need coding experience to add Google Material Icons to my site?
A2: Basic knowledge of JavaScript, HTML, and CSS is helpful, especially when using methods that involve custom code. However, the step-by-step instructions provided aim to assist users with minimal coding experience.
Q3: Are Google Material Icons free to use on my website?
A3: Yes, Google Material Icons are open-source and free to use under the Apache License Version 2.0. You can incorporate them into your website without any licensing fees.
Q4: How do Google Material Icons affect my site's loading speed?
A4: Google Material Icons are optimized for performance and load quickly. Using the static icon font can further enhance loading times, contributing to a smooth user experience.
Q5: Can I customize the appearance of Google Material Icons?
A5: Absolutely! You can adjust the size, color, and style (outlined, rounded, sharp, etc.) using CSS to match your site's design and branding.
Q6: Is there an easier way to add icons to my Squarespace navigation menu?
A6: Yes, while the guide covers advanced CSS methods, you can use specialized plugins or extensions designed to simplify adding icons to your navigation menu without complex coding.
