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.

Google Material Icons1 Min

Next, a box will pop out on the right of the screen. Click Copy icon on Variable icon font to copy code.

Google Material Icons2 Min

Add the code to Code Injection > Header 

Google Material Icons3 Min

Scroll to this Code point box and copy Icon code

Google Material Icons4 Min

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;

}

Google Material Icons Header Button Min

Button Block

div.button-block a:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;

}

Google Material Icons Button Block Min

Newsletter Button

span.newsletter-form-button-label:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;
}

Google Material Icons Newsletter Button Min

Form Lightbox Button

button.lightbox-handle:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;
}

Google Material Icons Form Lightbox Button Min

Donate Button

div.sqs-donate-button:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;

}

Google Material Icons Donate Button Min

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;
}

Add To Cart Button Min

List Item button

a.list-item-content__button:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;
}

Google Material Icons List Item Button Min

List Section button

a.list-section-button:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;
}

Google Material Icons List Section Button Min

Checkout Button

button.cart-checkout-button:before {
    content: "\e88a";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    top: 3px;
    position: relative;

}

Google Material Icons Checkout Button Min