Add SVG to buttons

Hello,

In order to add an icon to a button using a CSS class, you can follow these steps:

1. Prepare your SVG icon and convert it to Data URI using a converter like https://yoksel.github.io/url-encoder/.
2. Inside your WordPress Dashboard, navigate to Appearance > Customize > Additional CSS.
3. Paste the following code into the Additional CSS box:

.button-icon a.wp-block-button__link::before {
content: "";
display: inline-block;
height: 24px;
width: 24px;
background-image: url("data:image/svg+xml, {your encoded SVG here}");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 8px;
vertical-align: middle;
}

Replace {your encoded SVG here} with the Data URI you got from the URL Encoder.

4. Adjust the height, width, and margin properties to suit your needs.
5. Now, apply the “button-icon” class to each button block you want the icon to appear in. You can do this by selecting the button block, then in the right sidebar under “Advanced”, add “button-icon” to the “Additional CSS Class(es)” field.

Hope that helps,
Yann

Thank you very much for your answer, easy to follow and it works! ??

Additionally, how can I show the same color of the SVG as the color font of the button that is set up on the theme?
For example, black for the normal state, and white for the hover state.

Thanks again!

The issue is that fill: currentColor isn’t a valid attribute for pseudo-elements like ::before. Instead, you can add the color directly inside the SVG element.

Here’s how you can do that for black as the normal state color and white for the hover state:

1. Insert fill="#000" into your SVG:

<svg xmlns="https://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#000" d="M220-180h150v-250h220v250h150v-390L480-765 220-570v390Zm-60 60v-480l320-240 320 240v480H530v-250H430v250H160Zm320-353Z"/></svg>

2. Convert this SVG to a Data URI using https://yoksel.github.io/url-encoder/ and insert the encoded SVG into your CSS:

.button-icon a.wp-block-button__link::before {
	content: "";
	display: inline-block;
	height: 24px;
	width: 24px;
	background-image: url("data:image/svg+xml, {your encoded SVG here}");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 8px;
	vertical-align: middle;
}

3. Next, prepare the SVG for the hover state by changing the fill color to #fff:

<svg xmlns="https://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path fill="#fff" d="M220-180h150v-250h220v250h150v-390L480-765 220-570v390Zm-60 60v-480l320-240 320 240v480H530v-250H430v250H160Zm320-353Z"/></svg>

4. Again, convert this SVG to a Data URI and insert the encoded SVG into your CSS:

.button-icon a.wp-block-button__link:hover::before {
	background-image: url("data:image/svg+xml, {your encoded SVG here}");
}

Hope that helps ??

Thank you very much for your detailed explanation. It works!

Really appreciated. ????