Customize Navigation Block Hamgurger Icon

You could use the render_block filter to replace the <svg> tag with a different SVG like so:

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);

• This reply was modified 2 years, 3 months ago by Lingulo. Reason: fixed replacement pattern to address only the navigation icon and not the close button

Works perfectly! Thanks!

For those looking for a way to replace the navigation close button icon, using <svg xmlns(.*?) in place of <svg width(.*?) in the preg_replace suggested by @sacredclown worked nicely for me.

Thanks @sacredclown !
I had an issue with the regex because I had a “social icons block” in my navigation and the preg_replace also replace the social nav icons

So I change the 2 lines icon by 3 lines in the editor an modify the code like this [gist]

<?php
function custom_burger_svg_icon_render_block_core_navigation (string $block_content, array $block){

	if ($block['blockName'] === 'core/navigation' && !is_admin() &&	!wp_is_json_request()) {
		// replace $svg content with your burger icon > this one was made by ngamlerdlek.design https://thenounproject.com/icon/burger-1126774/
    $svg='<svg id="burger" xmlns="https://www.w3.org/2000/svg" with="64" height="64" viewBox="0 0 128 128"><path d="M11.81 88.57c0 8.08 5.68 14.62 12.56 14.62h80.15c6.88 0 12.56-6.54 12.56-14.62v-2.92H11.81v2.92Zm52.63-64.15c-29.06 0-52.63 19.44-52.63 43.17h105.25c-.17-23.91-23.56-43.17-52.62-43.17Zm55.03 47.64H9.23c-2.4 0-4.47 2.06-4.47 4.47S6.82 81 9.23 81h110.24c2.4 0 4.47-2.06 4.47-4.47 0-2.41-1.89-4.47-4.47-4.47Z"/></svg>';
    
    // Replace the existing burger icons  3 lines burger (you have to change the 2 lines to 3 lines icon in wp-nav block) in the block content with the custom SVG
		return preg_replace('/\<svg width="24" height="24" xmlns="http:\/\/www.w3.org\/2000\/svg" viewBox="0 0 24 24"\>\<path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" \/\>\<\/svg\>/', $svg, $block_content);
	}

	return $block_content;
}
// Hook the custom function to the 'render_block' filter
add_filter('render_block', 'custom_burger_svg_icon_render_block_core_navigation', null, 2);

insert in functions.php file in your theme