Filter to modify SVG icons used in core blocks, like `wp-block-search`'s icon and `wp-block-navigation`'s overlay icon

[daviedR]

What problem does this address?

Currently there is no filter to change any SVG icons used in the core blocks. For example Search's icon, Navigation's overlay icon.

What is your proposed solution?

Icons are very also design scope, means theme authors might need to use custom icons for these blocks. There should be filters to change these icons programatically.

[rvdsteege]

I was looking for a filter to change the navigation block icon SVG, but surprisingly there is no filter yet 😢

[straightvisions-matthias-bathke]

As a workaround, you could switch to text-button and insert custom SVG as inline image (you may need a plugin like SVG Support)

[spielhoelle]

Found this stackoverflow solution to replace the svg in a php filter:

function custom_render_block_core_navigation (string $block_content, array $block)
{
	if (
		$block['blockName'] === 'core/navigation' && 
		!is_admin() &&
		!wp_is_json_request()
	) {
		return preg_replace('/\<svg width(.*?)\<\/svg\>/', 'add your SVG here', $block_content);
	}

	return $block_content;
}

add_filter('render_block', 'custom_render_block_core_navigation', null, 2);

[Lovor01]

This can be more optimally written, with filter render_block_core/navigation, then you do not need first if condition.