md-icon loaded using addSvgIconSetInNamespace appe

问题:

md-icons loaded using addSvgIconSetInNamespace appear in the DOM but are not visible.

My 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>

My TS:

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

I made a plunkr to demonstrate the issue: https://plnkr.co/edit/KYyfI0uBq2GYM2ElC1k3?p=preview

回答1:

<symbol> tags are copied to the DOM, which will not be rendered without the <use> tag:

a symbol element itself is not rendered. Only instances of a symbol element (i.e., a reference to a symbol by a element) are rendered.

-https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

After referencing the docs, I've managed to make it work by modifying my svg file to include a <defs> tag and renamed all my <symbol> tags to <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>

Updated plunkr: https://plnkr.co/edit/jHtKsmqrXXxoVF8tJhNb?p=preview