Add Google Material Icons to Button

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;

}