Businesswoman Dashicon not rendering in Block Library

[paulpooka]

The businesswoman Dashicon doesn't currently render as a custom icon in the block library. I believe that all other WordPress dashicons do.

The problem appears to stem from the businesswoman icon SVG having two <path>s, not one like all other WordPress Dashicons.

The Block Library doesn't directly reference wp-includes/fonts/dashicons.svg instead it uses wp-includes/js/dist/components.min.js which is the minified version of wp-includes/js/dist/components.js

It appears that whatever code is turning the svg dashicons in wp-includes/fonts/dashicons.svg into wp-includes/js/dist/components.js isn't working on SVGs with more than one path inside them.

You can test this by adding the following to the switch statement in wp-includes/js/dist/components.min.js at a suitable point, such as before the 'businessman' case:

case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5 1.4.5z";break;

This will allow most of the businesswoman Dashicon to render in the Block Library, however her necktie will still be missing from the icon:

e="M10 11l-2.3-1 2.3 5.8 2.3-5.8";

Adding this into the businesswoman case will cause only the necktie to appear in the Block Library:

case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5 1.4.5z";e="M10 11l-2.3-1 2.3 5.8 2.3-5.8";break;

What is needed in wp-includes/js/dist/components.min.js is the following, which renders the whole of the icon:

case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5 1.4.5zM10 11l-2.3-1 2.3 5.8 2.3-5.8";break;

So there appear to be two solutions:

1. (Harder but more futureproof): Modify the code that generates wp-includes/js/dist/components.js and components.js.min to accept dashicons with two paths.

2. (Simpler and should solve this single problem): Modify the code of the Dashicon businesswoman SVG within wp-includes/fonts/dashicons.svg to the following single path code:

<symbol viewBox="0 0 20 20" id="businesswoman"><title>businesswoman</title><g><path d="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5 1.4.5zM10 11l-2.3-1 2.3 5.8 2.3-5.8"/></g></symbol>

Then re-run the buildscripts that generate wp-includes/js/dist/components.js and components.js.min, which should render the businesswoman icon properly:

case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5 1.4.5zM10 11l-2.3-1 2.3 5.8 2.3-5.8";break;

[ocean90]

Hello @paulpooka, welcome to WordPress Trac!

Thanks for the report. You can find the ​source of the build file on GitHub in the Gutenberg repo. To get additional icons added please open a new issue (or pull request) on GitHub. Once the changes are made there a packages update will bring them back to WordPress core. Thank you!

[paulpooka]

Thanks @ocean90 - I've just done this. It's a brave new world for me, so please let me know if I've done anything wrong!

Also, where should I go in GitHub to amend the dashicons.svg file please? It would make sense to make the original SVG a single path, to bring it inline with the .js rendered version.