RichTextToolbarButton adding dashicons makes them squashed to text

[dingo-d]

Description

When creating a custom formatting button for the RichText component using RichTextToolbarButton, if you specify the icon as the name of the dashicons icon

	return <RichTextToolbarButton
		icon='editor-indent'
		title={ __('Toggle indent') }
		onClick={() => setAttributes({[`${componentName}IsIndented`]: !isIndented})}
		isActive={ isIndented }
	/>

you get this

However, if you use svg - and not just copy pasted one, that won't work, you need to recreate the svg using primitives

	import { SVG, Path, Rect, G } from '@wordpress/primitives';

	const indent = (
		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
			<Rect x="0" fill="none" width="20" height="20"/>
			<G>
				<Path d="M3 5V3h9v2H3zm10-1V3h4v1h-4zm0 3h2V5l4 3.5-4 3.5v-2h-2V7zM3 8V6h9v2H3zm2 3V9h7v2H5zm-2 3v-2h9v2H3zm10 0v-1h4v1h-4zm-4 3v-2h3v2H9z"/>
			</G>
		</SVG>
	);

	return <RichTextToolbarButton
		icon={indent}
		title={ __('Toggle indent') }
		onClick={() => setAttributes({[`${componentName}IsIndented`]: !isIndented})}
		isActive={ isIndented }
	/>

It looks ok because the SVG element will be rendered instead of dashicons which is just added as a pseudo-element and has no styling for it.

SVG elements have

.components-button.has-icon.has-text svg {
    margin-right: 8px;
}

whereas dashicons icons have

.components-button.has-icon .dashicon {
    display: inline-block;
    flex: 0 0 auto;
}

Notice the missing margin on the right.

Step-by-step reproduction instructions

Expected behaviour

Stylings should be the same

Actual behaviour

Stylings are not the same, and I need to copy and paste, then transform the SVG to 'primitives' in order to be rendered properly.

WordPress information

• WordPress version: 5.6.2
• Gutenberg version: Core
• Are all plugins except Gutenberg deactivated? No, but it's a core bug, not a plugin bug.
• Are you using a default theme (e.g. Twenty Twenty-One)? No, and it shouldn't matter, this is a part of core GB functionality

Device information

• Device: Desktop
• Operating system: MacOs Big Sur 11.2.1
• Browser: Chrome Version 88.0.4324.192 (Official Build) (x86_64)

[Quintis1212]

Hello @dingo-d ) You can paste your svg as native svg tag with low letters :
Path gutenberg/packages/format-library/src/bold/index.js
`

          import { __ } from '@wordpress/i18n';
          import { toggleFormat } from '@wordpress/rich-text';
          import {
              RichTextToolbarButton,
              RichTextShortcut,
              __unstableRichTextInputEvent,
          } from '@wordpress/block-editor';
          import { formatBold } from '@wordpress/icons';
          
          const name = 'core/bold';
          const title = __( 'Bold' );

        export const bold = {
            name,
            title,
            tagName: 'strong',
            className: null,
            edit( { isActive, value, onChange, onFocus } ) {
	            function onToggle() {
		            onChange( toggleFormat( value, { type: name } ) );
	            }

	function onClick() {
		onToggle();
		onFocus();
	}

	const indent = (
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
				<path d="M3 5V3h9v2H3zm10-1V3h4v1h-4zm0 3h2V5l4 3.5-4 3.5v-2h-2V7zM3 8V6h9v2H3zm2 3V9h7v2H5zm-2 3v-2h9v2H3zm10 0v-1h4v1h-4zm-4 3v-2h3v2H9z"/>
		</svg>
	);

	return (
		<>
			<RichTextShortcut
				type="primary"
				character="b"
				onUse={ onToggle }
			/>
			<RichTextToolbarButton
				name="bold"
				icon={ indent }
				title={ title }
				onClick={ onClick }
				isActive={ isActive }
				shortcutType="primary"
				shortcutCharacter="b"
			/>
			<__unstableRichTextInputEvent
				inputType="formatBold"
				onInput={ onToggle }
			/>
		</>
	);
},

};

`

[dingo-d]

Hmmm didn't tested that out 🤔 When I just added the SVG as a string in the icon prop, it didn't render, but it tried to load dashicon 🤷🏼‍♂️

Thanks for the tip 👍🏼

[Quintis1212]

You are welcome! Just remember that If you start a tag name from capital letter react-dom will be try to find this component , and if there is no such component it will throw error