The Icon Block Plugin

Nick Diego is a great WordCamp speaker and developer working on the full site editing project. The Icon Block plugin “allows you to add custom SVG icons and graphics to the WordPress block editor… (it) also includes the complete WordPress icon library with 270+ SVG icons to choose from”.

ADVANTAGES

• Icons are organized in logical categories
• Icons can be easily sized, styled and manipulated
• Many of the icons you want and need are already available

Get it here

The toolbar offers these controls:

These are the block settings:

There are provisions to insert .SVG code directly into the interface:

If you have .SVG files in the media library, you can select from them:

… and there are provisons to add custom .SVG files into the interface array which he describes here.

… and a user posted this add-on plugin using that information…

The two crucial elements in both are how each icon is expressed:

{
name: 'candle',
title: __( 'Candle', 'custom-icons' ),
icon: '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 660 660" style="enable-background:new 0 0 660 660;" xml:space="preserve"><polygon points="378,655 282,655 282,224.5 378,199.4 "/><rect x="323.1" y="185.7" width="16" height="62.8"/><path d="M331.3,5c-8.3,0.5-48,88.9-48,120.2s21.5,56.6,48,56.6s48-25.3,48-56.6S341,4.4,331.3,5z M331.3,177.4	c-15.9,0-28.8-15.2-28.8-34c0-18.8,23.8-71.8,28.8-72.1c5.8-0.4,28.8,53.3,28.8,72.1C360.1,162.2,347.2,177.4,331.3,177.4z"/></svg>',
categories: [ 'mono' ],
keywords: [ 'process' ],
},

… and how a custom category is created:

const customIconCategories = [
{
  name: 'mono',
  title: __( 'Mono', 'pdog-theme' ),
 },
  {
  name: 'color',
  title: __( 'Color', 'pdog-theme' ),
  },
];

Then the selection of icons will be expanded

IMPORTANT NOTE:

The way the plugin assigns icon color, background color and other icon attributes is via in-line CSS attached to the icon block container div.

However this depends on the icon having no set colors – if a color is specified within the .SVG file the assignment will be in-line to the specific fill area and so will take precedence over any style attached to the container div…

<div class="wp-block-outermost-icon-block" style="margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--30)">

<div class="icon-container has-border-color has-contrast-border-color has-icon-color has-icon-background-color has-contrast-background-color has-cyan-bluish-gray-color" style="background-color:#000000;color:#abb8c3;width:200px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);border-width:1px;border-radius:50%">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 660 660" style="enable-background:new 0 0 660 660" xml:space="preserve">
<polyline points="121.6,8.6 314.3,317.5 236.3,279.3 196.5,312.9 208,336.6 227.9,316.8 224.8,301.5 274.5,329 217.2,363.4 	254.6,323.6 234.8,310.6 117.8,436.8 318.1,349.6 276.1,417.7 295.2,434.5 331.1,394 369.4,440.6 384.6,427.6 386.2,410.8 	351.8,353.5 436.6,389.4 452.7,374.9 391.5,335.9 411.4,328.2 397.6,306.8 353.3,318.3 399.2,253.3 377.8,233.4 338.8,287.7 	247,141.6 293.6,168.4 299,147 123.1,4 "></polyline><polygon points="337.2,169.2 551.4,11.6 412.9,229.6 390.8,213.5 454.2,121.8 360.2,189.1 "></polygon><polyline points="346.4,157.7 367.8,143.2 334.9,12.4 287.5,202.1 292.9,210.5 338,113.4 "></polyline>
<polygon points="319.6,165.4 312.8,180.6 449.6,284.6 469.5,272.4 "></polygon>
<polygon points="364.8,187.5 376.2,180.6 383.9,204.4 364,192.1 "></polygon>
<polygon points="360.9,221.9 375.5,228.1 376.2,235.7 367.8,242.6 "></polygon>
<polygon points="399.9,257.1 386.9,281.6 426.7,335.9 438.2,321.4 406.8,260.9 "></polygon>
<polyline points="430.5,296.9 547.5,231.9 435.1,361.1 419.8,351.2 451.2,307.6 438.9,310.6 432.8,299.9 "></polyline>
<polygon points="483.3,312.2 496.3,294.6 544.5,332.1 413.7,444.5 422.9,403.2 503.9,337.4 "></polygon>
<polygon points="444.3,355.8 456.5,340.5 471.1,359.6 458.8,369.5 "></polygon>
<polygon points="292.9,209.7 317.4,187.5 337.2,203.6 307.4,227.3 "></polygon>
<polygon points="255.4,231.1 268.4,248.7 169,332.8 188.9,351.9 168.2,371.8 119.3,336.6 "></polygon>
<polygon points="117,215.8 201.9,267.8 179.7,286.2 "></polygon>
<polygon points="202.6,404.7 225.6,391.7 335.7,465.9 315.8,481.9 "></polygon>
<polygon points="379.3,436.1 370.1,470.5 321.2,504.1 312,488.8 "></polygon>
<polygon points="256.9,449.1 305.9,480.4 331.9,557.6 351.8,513.3 370.1,529.4 335.7,647.1 278.4,471.2 227.1,538.5 283.7,508.7 	291.4,524.8 123.9,647.9 "></polygon>
<polygon points="253.1,280.1 271.5,256.4 279.9,266.3 271.5,290 "></polygon>
<polygon points="247.8,384.8 266.9,374.1 279.9,403.2 269.9,416.2 260,409.3 "></polygon>
<polygon points="232.7,350.2 233.5,349.4 242.8,340.1 246.4,343.9 "></polygon>
<polygon points="333.4,496.5 533,654 405.3,439.1 393.8,468.2 436.6,544.6 356.4,481.9 "></polygon>
<polyline points="368.6,489.6 380.8,500.3 420.6,387.1 400.7,379.5 371.6,479.6 "></polyline>
<polygon points="468,402.4 492.5,381 549.1,447.5 "></polygon>
<circle cx="206.1" cy="212.4" r="24.9"></circle>
<circle cx="469.5" cy="225" r="21.4"></circle>
<circle cx="476" cy="464" r="22.6"></circle>
<circle cx="200.4" cy="457.5" r="24.5"></circle></svg>
</div>
</div>

If the .SVG file has fill colors defined within it then the icon “color” over-ride will not “take” however the other controls (background color, size, margin, padding, border) work just fine: