AngularJS, templates & ng-include’s SVG

I’m on an AngularJS 1.4 stack, coupled with Webpack 4.

We have a huge amount of SVG Icon on our CDN (dedicated library), and as for now, we use SVG in our templates like this :

<ng-include src="'url/to/the/cdn/icon.svg'"></ng-include>

I think it’s the simpliest way for our developers to just go the icon’s browser (dedicated app on a webpage with a search feature), just grab the url of it and paste it into the template. It’s imo easier to read the name & the url of the icon rather than paste the full SVG code into the template (which we could do, it’s not more difficult).

It works perfectly fine, but there’s still some network calls. Everytime someone is going to visit the concerned web page for the first time, there’s a network call in order to get the SVG code in order to include it in the HTML. It’s cached after that, so that’s not a big issue.

I’m seeking a way to do this call & this transformation at the build time, in order to prevent useless network call for our XXXX clients.

I’ve tried some svg-url-loader or svg-inline-loader but it doesn’t change anything (by adding a module rule for svg files in the webpack config).

What am I doing wrong ?

Thx a lot for the help 🙂

Source: AngularJS