Extend the native Button block (core/button) with clean, configurable SVG icons. Pick an icon from your plugin’s /icons folder, choose its position (left/right), and control the gap between the icon and the label, all from the block Inspector.
- Download the plugin ZIP.
- In WordPress Admin go to Plugins → Add New → Upload Plugin and choose the ZIP.
- Activate Iconify Button.
# in wp-content/plugins
git clone https://github.com/code-mat/iconify-button.git iconify-button
cd iconify-button
# install and build (requires @wordpress/scripts)
npm install
npm run buildThen activate the plugin in Plugins.
- Add or select a Button block.
- In the Icon settings panel (Inspector), pick an icon, choose its position and set the spacing.
- Adjust your theme’s CSS if needed (see Styling).
The plugin extends core/button with these attributes:
| Attribute | Type | Default | Description |
|---|---|---|---|
icon |
string | — | Selected icon slug (derived from the SVG filename inside /icons). |
iconPosition |
string | left |
Icon position relative to the label (left or right). |
iconGap |
number | 8 |
Gap between icon and label, in pixels. |
On the frontend, the plugin outputs:
.wp-block-button__link.has-iconifyand.has-iconify--left/rightclasses, and- an inline
<span class="iconify-button__icon" aria-hidden="true">…</span>containing the sanitized SVG.
You can style it with plain CSS.
Place your SVGs in the plugin’s icons/ directory. Filenames become slugs in the picker, e.g.:
icons/
├─ arrow-left.svg → slug: arrow-left
└─ check.svg → slug: check
Important: After adding, renaming or removing SVGs in
/icons, runnpm run build. The editor’s icon picker is generated at build time (fromicons.generated), so a rebuild is required for new icons to appear in the Inspector.
- WordPress 6.7 or newer
- PHP 7.4 or newer
See readme.txt for the WordPress‑style changelog. Current release: 0.1.0.
GNU General Public License v2.0 or later. See LICENSE.