SVG's inside buttons are visible on the front but not in the editor

[carolinan]

Description

I want to add an SVG in a button block like in the following example:

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"4px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"2px","right":"2px"}}},"className":"is-style-jace-shadow-button","fontSize":"extra-small"} -->
<div class="wp-block-button has-custom-font-size is-style-jace-shadow-button has-extra-small-font-size"><a class="wp-block-button__link" href="http://advanced.local/?s" style="border-radius:4px;padding-top:0px;padding-right:2px;padding-bottom:0px;padding-left:2px">
			<svg xmlns="http://www.w3.org/2000/svg" class="search-icon" role="img" alt="Go to search page" aria-label="Go to search page" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>
			</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"border":{"radius":"4px"},"spacing":{"padding":{"top":"0px","bottom":"0px","left":"2px","right":"2px"}}},"className":"is-style-jace-shadow-button","fontSize":"extra-small"} -->
<div class="wp-block-button has-custom-font-size is-style-jace-shadow-button has-extra-small-font-size"><a class="wp-block-button__link" href="#" style="border-radius:4px;padding-top:0px;padding-right:2px;padding-bottom:0px;padding-left:2px">
			<svg xmlns="http://www.w3.org/2000/svg" class="go-to-top-icon" role="img" alt="Go to top" aria-label="Go to top" viewBox="0 0 24 24" width="40" height="40" fill="currentColor"><path d="M12.5 3.9L6.7 9.7l1.1 1.1 4-4V20h1.4V6.7l4.5 4.1 1.1-1.1z"></path></svg></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

But the SVG is not visible in the editor, only on the front.

Step-by-step reproduction instructions

1. Copy the button markup above
2. In the editor(s), open the code editor view and paste the code
3. See that the SVG is not visible in the button.
4. Save and view the front. Confirm that the SVG is visible.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.9.3
Gutenberg 13.0.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[stokesman]

This is a bit more general than the Buttons block. The rich text component is what handles the markup inside the button. The same thing applies to other blocks that don't accept inner blocks.

I made #24582 well over a year ago that addresses this but now I've reopened that as #40496. Here's what I see on that branch when pasting the snippet you provided (other than I changed the alignment);

[Mustafabharmal]

The root cause is that the append function in packages/rich-text/src/to-dom.js creates SVG elements via document.createElement, which produces generic HTML elements that browsers can't render as SVGs. The fix is to use document.createElementNS with the SVG namespace URI, exactly the same pattern already used for MathML support added in #72182.
I am working on this.