Symbol id doesn't work without path to SVG file

[kalongthewires]

I'm looking to include a SVG sprite sheet on the page once and then use the symbol method to reference individual icons (to improve performance) per your README documentation and the CSS Tricks article (https://css-tricks.com/svg-symbol-good-choice-icons/).

For example, in app.component.html:

<span
  inlineSVG="../assets/sprite-sheet.svg"
></span>

Then, in icon.component.html (similar to the example in your npm/README documentation):

<span
  inlineSVG="#symbol-id-goes-here"
></span>

The above in icon.component.html does not work. I receive the error:

Error: No SVG found in loaded contents

However, I can add a symbol id to a file path, like so:

<span
  inlineSVG="../assets/sprite-sheet.svg#symbol-id-goes-here"
></span>

That works fine, but it injects the symbol alongside the use element for every icon at runtime. This lowers performance significantly.

ng-inline-svg version: 11.0.1
Browser: Chrome 86.0.4240.111

The problem seems to be from the latest release:

I believe that change removes the symbol id from the SVG path, so if there's no SVG path, all that's left is an empty string leading eventually to the Error: No SVG found in loaded contents error downstream.

[arkon]

The SVG needs to be available on the page prior to the symbol ID being referenced.

If you look at the demo in this package, it's just placed in the static HTML directly, but you should be able to put it in an Angular template as you see fit too.

[kalongthewires]

Thank you for the quick response! I'll take a look at the demo.

[kalongthewires]

It seems to work fine if the sprite sheet is added directly to the index.html file like in the demo. If it's in an Angular template then I always get the Error: No SVG found in loaded contents, regardless of whether the sprite sheet is in a parent template like app.component.ts or if it's in the same template as the icon itself. Am I missing something?

Would definitely prefer to include the sprite sheet in a template -- it would make it much easier to write tests and mean that I could load a sample sprite sheet alongside a demo of the component (e.g. if I use it in a Storybook-type of environment) without having to have magic configuration in some other separate file.

[arkon]

I haven't tried recently and I don't really remember if I ever did a few years back. It's possible that it might require an extra tick for Angular to actually render the template (with the SVG) first before the directive can actually find it in the DOM.

I admittedly haven't used Angular in years though, so there may be better ways of doing it now.