使用addSvgIconSetInNamespace加载的md-icon出现在DOM中，但不可见

Question

使用addSvgIconSetInNamespace加载的md-icon出现在DOM中，但不可见。

我的SVG：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <symbol id="thumb" width="100%" height="100%" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
    </symbol>
</svg>

我的TS：

iconRegistry.addSvgIconSetInNamespace(
  'withSymbols',
  sanitizer.bypassSecurityTrustResourceUrl('withSymbols.svg')
);

我做了一个问题来演示这个问题： https ://plnkr.co/edit/KYyfI0uBq2GYM2ElC1k3?p=preview

Answer 1

<symbol>标签被复制到DOM，没有<use>标签将不会被呈现：

一个符号元素本身不会被渲染。 仅呈现符号元素的实例（即，元素对符号的引用）。

-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/symbol

引用文档后 ，我设法通过修改svg文件使其包含<defs>标记并将其所有<symbol>标记重命名为<svg>来使其工作：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <def>
    <svg id="thumb" width="100%" height="100%" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
    </svg>
  </def>
</svg>

更新的plunkr： https ://plnkr.co/edit/jHtKsmqrXXxoVF8tJhNb ? p = preview