Over the weekend, I experimented with the Icon Block plugin by Nick Diego as I’ve seen it mentioned throughout social media a number of times. In addition to giving users access to WordPress’ existing icon library, you can also add a custom SVG icon or graphic. WordPress already ships with an Icon block but it only provides access to Dashicons.
While experimenting with Diego’s Icon Block, I wondered if it’s possible to replace a JPEG or PNG of the WordPress logo in an article with a WordPress icon as using an icon has a much smaller footprint. In this experiment, I used the Twenty-Twenty-One theme on a fresh install of WordPress 5.8.1.
I inserted the WordPress icon using the Icon Block and below that, added a paragraph block. I then tried to align the icon so that it appeared on the left side of the paragraph. I spent about a half-hour trying to get this to work without much success. After taking a long break and getting confirmation from Nick that it is indeed possible to do, I successfully pulled it off today.
It turns out, I was clicking the Item Justification button to align the icon and not the Alignment button. The two buttons are similar looking and are right next to each other. Talk about a facepalm moment.
Once I figured that out, I was able to place the icon on the left or right side of the paragraph but did not get the results I was looking for. In the screenshot above, the icon is aligned to the left and is at a width of 100%. But if you look at how it appears on the front end, it’s much larger than that.
If I set the icon to be 25% in the backend, it appears as a tiny dot while on the frontend, it is somewhat larger. There is also a large space that is created between the icon and the paragraph.
If I remove the icon block and insert an image, then align that image to the left, I get the desired appearance on the front and backend.
In my limited amount of testing and experimentation, it appears I can not accomplish what I want with an icon block versus an image block. Blocks are complicated and I’m sure there are technical reasons as to why it doesn’t work, but I thought it would. In my opinion, this use case is rather simple on paper although, in the Classic editor, I would have opted to continue using images because icons were not readily available to me within the editor.
If you want to insert an icon as a stand-alone block, this plugin works great. It should also be noted that if you’re concerned about security issues related to using custom SVG icons, Administrators and Editors are the only user roles that can save SVG content. The icon block will not work for users who are at the Author user role or lower.