Add Icons to WordPress’ Core Button Block


Nick Diego, a developer advocate at Automattic and core contributor, is the author of the popular Icon Block plugin that enables users to add custom SVG icons and graphics to the WordPress block editor. He is often asked if the plugin can add icons to the core Button block, but that is outside the scope of what it does. Last week he wrote a plugin that fulfills this feature request in a separate plugin without building a custom block.

The Enable Button Icons plugin is available on GitHub as an example that demonstrates how developers can lightly extend core blocks for features like this. Diego said he was inspired by WordPress developer Aki Hamano’s Enable Responsive Image plugin that adds settings to the Image block to elegantly display different images depending on the width of the screen.


Enhancing WordPress Image Blocks with the Enable Button Icons Plugin


“I wanted to use the WordPress image block to switch images on mobile, but I wanted something that would simply extend the core block without having to create a custom block, so I tried making one,” Hamano said. “For now, you can only add one image, and only the breakpoint and resolution can be switched.”

Diego said he doesn’t plan to add his Enable Button Icons plugin to the official WordPress directory.

“It works great, but it is not designed to support an entire library of icons, and I know that will be the first thing people ask for,” he said. “So, I’m thinking of keeping it as an example and encouraging people to take it and modify it as they want.”

I tested the plugin and it works perfectly but is certainly ripe for being extended to support a larger selection of icons. Alternatively, it may be useful for a brand that has a set number of custom designed icons they want to be easily accessible for use in Button blocks.

Testing enable button icons -Core Button Block
× WhatsApp