Advanced Icon Block

The Advanced Icon block allows you to add icons to WordPress content. This block uses Google's Material Design icons. You can customize the style, size, color, link, margin, padding, background, border and more.

Video guide to the Advanced Icon block

How to create the Advanced Icon block

You can create an Advanced Icon block by clicking its button in the PublishPress Blocks category:

Settings for the Advanced Icon block

You can adjust key settings for the icons by using the right sidebar. The first option allows you to decide the number of icons in the row:

Choose Your Icon

The key setting for this block is choosing your icon.

• Click the “Icon Selection” button.

• You can now browse for icons, or use the “Search icons” feature.
• Select an icon and click “Apply” to add icon to your post.

In addition to choosing an icon, you can select a “Style” from this dropdown:

• Filled
• Outlined
• Rounded
• Two-Tone
• Sharp

After choosing your icon, you can also choose “Default” or “Stacked” in the sidebar. “Stacked” will add a border to the icon.

Keyy settings for the Advanced Icon blocks

After you choose an icon, you will see extra settings in the right sidebar:

• Icon Size (in pixels)
• Icon Color
• Icon Background

These border options will only appear if you choose “Stacked”:

• Border
• Border Size
• Border Radius

The “Link” area allows you to add links to your icon. Add the icon to the box labelled “Paste URL or type to search”.

In the “Padding” and “Margin” areas you can choose the padding and margin for your icons, using px, em or vh.

Default settings for all your Advanced Icon blocks

You can set default options for every Advanced Icon block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your accordions.

• Go to Adv. Gutenberg in your WordPress admin menu.
• Click Configuration, then Default Blocks Config.
• Click Advanced Icon.