Using SVG symbols in Firefox with AngularJS

Question

I'm trying to use SVG icons with Angularjs with html5Mode set to true. In order to use html5mode urls, you need to set the basePath in the head of the html document.

<base href="/">

I then load all of my svg icons into the index.html page as symbols.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="user" viewBox="0 0 64 64">
        <path d="...">
    </symbol>
</svg>

I can't figure out how to get this to work consistently in Firefox. In Chrome and IE, I can always just set the svg use href to the id of the svg symbol.

<svg ng-class="type" class="main-nav-icon">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>

However, none of the icons are displayed in Firefox. From a previous question, I was told that this was because of the base tag. So I tried setting the base tag to an absolute url

<base href="http://localhost:5080/">

And then tried every combination of urls for the use tag. I finally got it to work if I use an absolute url based on the original path that the index.html page was downloaded from.

For example, if the page was loaded from http://localhost:5080/user then setting up the use tag like the following will display the icons:

<svg ng-class="type" class="main-nav-icon">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://localhost:5080/user#user"></use>
</svg>

This works okay when the user is clicking around the app. However, if the user then refreshes the page on http://localhost:5080/photos all of the icons are broken again because the href is now incorrect. So then I started caching the original url that the index.html page was loaded from and using that. However, even then refreshing on some pages breaks all of the icons again.

Using html5mode with AngularJS, what is the right thing to set the base tag to and what is the right thing to set the use tag href to in order to make the icons show up in IE, Chrome, and Firefox?

Answer 1

It seems like this bug that mentioned here and fixed by Jeff Cross (from google) by this

Auto directives to automatically rewrite absolute hash URLs for fragment references in SVG elements, to work around side effects in Gecko and Blink.