Unsafe attempt to load URL svg

This page has all the answers, I believe :

https://css-tricks.com/svg-use-external-source/

• It just doesn't work on IE unless you use a polyfill.
• Comments down the page describe the issue on Chrome when running locally :

you can run into some cross-domain issues with this technique when developing locally, if you aren’t developing with a server.

As I wrote on davidwells.io (on this page is also his Javascript solution of the problem):

I had the same problem when I used external SVG file. I had to change configuration of virtual server and stop automatic redirecting SVG requests from HTTP to HTTPS. Other words: SVG file must be available on both of protocols. Now it working.

use a server such as express.js or apache or nginx to serve the files for you want, preferably an svg sprite that holds all your images you need so you can reference them in the template or front-end like this

<svg style="color: red;">    <use xlink:href="solid.svg#ad"></use></svg>

and in the back end if you're using express.js in your server.js file like this,

app.use(express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/sprites'));

^ reference a static directory where your svg sprite lives, that way you can avoid CORS issues. another way is to set the headers using ajax which another person above me has posted a link to css-tricks.