Colored blocks icons in the site editor "block > styles" section

[simom]

Plugins with colored icons for blocks

Plugins can define colored icons for their blocks, this rule will invalidate also an inline style.

Removing the css fill: currentColor property for svg

Remove the fill property on the svg element and in the stylesheet

[t-hamano]

Thanks for the report.

Looking at #49042, it looks like this style was added for a reason. How about trying to solve the problem by specifying the inline style prop as shown below?

registerBlockType( metadata.name, {
	icon: (
		<SVG
			viewBox="0 0 24 24"
			xmlns="http://www.w3.org/2000/svg"
			style={ { color: '#ff0000' } }
		>
			<Path
				d="M10 4.5a1 1 0 11-2 0 1 1 0 012 0zm1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm2.25 7.5v-1A2.75 2.75 0 0011 8.25H7A2.75 2.75 0 004.25 11v1h1.5v-1c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25v1h1.5zM4 20h9v-1.5H4V20zm16-4H4v-1.5h16V16z"
				fillRule="evenodd"
				clipRule="evenodd"
			/>
		</SVG>
	),
} );

[simom]

Hi @t-hamano and thank you for looking at!
Sure this can be a solution, but I was wondering why there is a double override (style.css and inline).

[t-hamano]

but I was wondering why there is a double override (style.css and inline).

@jorgefilipecosta In this regard, if you remember why you added this style when you submitted #49042, please let us know 🙏