Squarespace has a lot of buttons, and I will share how to insert Google Material Icons for these buttons.
- Header Button
- Button Block
- Form Block/Newsletter Block Button
- List Section Button
- Donate Button
- Form Block Lightbox Button
- Add to Cart Button
- Checkout Button
Two steps to add Google Material Icon
- Install Google Material
- Declare code for button
Install Google Material Icons
First, access Google Material Icons site then choose an icon which you want to add to your site buttons.
Next, a box will pop out on the right of the screen. Click Copy icon on Variable icon font to copy code.
Add the code to Code Injection > Header
Scroll to this Code point box and copy Icon code
Declare Icon
These code, you need to add to Custom CSS box
Header Button
header#header a.btn:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
Button Block
div.button-block a:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
Newsletter Button
span.newsletter-form-button-label:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
Form Lightbox Button
button.lightbox-handle:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
Donate Button
div.sqs-donate-button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
Add to Cart Button
/* Add to Cart button icon */ .sqs-add-to-cart-button-inner:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
List Item button
a.list-item-content__button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
List Section button
a.list-section-button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }
Checkout Button
button.cart-checkout-button:before { content: "\e88a"; font-family: 'Material Symbols Outlined'; font-size: 20px; top: 3px; position: relative; }