Whether you use Gutenberg to create a page or post, you can add a block or two using the Buttons block. The Buttons block, just like other built-in blocks, offers some customization options.
You can set things like background color, typography to box shadow. Unfortunately, there is no option to add an icon to your button.
This article will show you how to add an icon to the Buttons block in the WordPress Gutenberg editor without involving plugin.
Steps to Add Icons to Button in Gutenberg
Shortcuts ⤵️
Step 1: Add the Buttons Block
We need a button in advance before we add the icon to the button on your page or post.
Go to the WordPress Gutenberg editor and add a Buttons block to the editor. Once you add the Buttons block, you can insert any text to the button. In this example, we create a “DOWNLOAD PDF” button.
Step 2: Choose Your Preferred Icon
Next, choose what icon to add to the Buttons block. Many great icon libraries and toolkits are available online, such as Font Awesome, Iconify, etc.
In this tutorial, we will use Iconify to search for the icons we want to add to the button. Iconfy allows you to use many open-source icon sets with a wide choice of open-source icon components, so we recommend you use Iconify to make it easier.
Alright, go to the Iconify site, then search and choose what icon you like to add to the Buttons block.
Step 3: Copy the SVG Icon’s Code
Once you choose the icon, please copy the SVG code of the icon.
Step 4: Add the SVG Icon’s Code to the Buttons Block
We’re returning to the button you’ve created on the Gutenberg editor. We will add the SVG icon’s code we’ve copied previously to the Buttons block by editing it on the HTML editor.
Click on the block, and the toolbar will be displayed. Go to the Options block by clicking the Options button, then navigate to Edit as HTML.
Now, it’s time to insert the SVG icon’s code into the Buttons block in HTML editor mode. You can put that code before or after the name of the button.
This means if you want to place the icon before the name of the button, you must paste that code before the name of the button; otherwise, paste that code after the name of the button if you want to place the icon after the name of the button.
In this example, we want to place the icon after the name of the button “DOWNLOAD PDF,” so we paste our SVG icon’s code after the name of the button right before the </a> tag (see the GIF below).
Save the draft and review your project by clicking the Save draft and Preview button, and you will see the icon is already added to your button.
Step 5: Add Additional CSS to Setting the Button
As in the image above, you can see that the SVG icon is successfully added to your button, but the button’s looks are not good. So, we will add a simple CSS snippet to the WordPress Customizer CSS editor. to make the button look proper.
On your WordPress dashboard, navigate to Appearance -> Customize. If you use a block theme, you can enable Theme Customizer by adding the following snippet to the functions.php file of your theme or use a plugin like Code Snippets and WPCodeBox.
add_action( 'customize_register', '__return_true' );
We have published an article covering how to enable Theme Customizer in block theme you may want to read.
Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.
.wp-block-button__link {
display: flex;
align-items: center;
}
.wp-block-button__link svg {
width: 25px;
margin-left: 10px;
}
.wp-block-button__link svg path {
fill: #FFFFFF;
}
Once you’ve added the CSS snippet, apply it by clicking the Publish button.
Alright, return to your project on preview mode, reload the page, and you will see the promising button.
That’s it. If you’re happy with the result (as in the image above), keep it like this. But if you want to customize your button, you can edit the button on the block settings, such as the width, size, color, border radius, etc.
You can also edit the values on the CSS snippet to customize the SVG icon, such as the width and color.
The Bottom Line
Adding the icon to the button in the WordPress Gutenberg editor without the help of any plugins is very easy, as we’ve shown you in this article.
WordPress block editor or Gutenberg is an interpretation of WordPress itself — simple and easy to use. Because of their simplicity, they have some limitations; and adding an icon to the button is no exception.
Building and designing with the WordPress website builders, such as Elementor and Divi Builder, might be a better option if you want to get more features so that your creativity in designing your website has no limits.
Happy designing! 🙂
