javascript - appendChildの後に外部ファイルからsvgシンボルを表示する方法

Question

したがって、基本的には、svg シンボルを含むコンポーネントを作成するために使用したいと考えています。

<button onclick="openWindow('#my-template')">Open Template</button>
<template id="my-template">
    <div id="my-div">
        <div>My fancy stuff</div>
        <svg>
            <use href="/svg/icons.svg#my-icon"/>
        </svg>
    </div>
</template>

<use href="/svg/icons.svg#my-icon"/>ご覧のとおり、通常の html で完全に機能する外部 svg アイコン ファイルを参照しています。しかし、この基本的なJavaScript関数を実行したいのですが、DOMに追加した後、アイコン自体は表示されません。

function openWindow(e) {
    let content = document.querySelector(e).content;
    document.body.appendChild(content.cloneNode(true));
}

したがって、基本的には、テンプレート コンテンツのクローンを作成し、ドキュメントの本文に追加するだけです。アイコン自体がレンダリングされないことを除いて、完全に機能します。作成した DOM に svg ノードがありますが、アイコンが画面に表示されません。<svg>現在の HTML ドキュメントにシンボルがリストされているインライン ドキュメントを含め、アイコンを参照すると<use href="#i-my-icon"/>、期待どおりに動作します。アイコンが表示されます。.svgこの場合、外部ファイルを引き続き使用するにはどうすればよいですか? svg アイコンを直接インライン展開したり、すべての HTML ドキュメントやテンプレートにアイコン セットを含めたりすることはしたくありません。