javascript - Using SVG symbols in Firefox with AngularJS - Stack Overflow

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="" 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="" 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 bination 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="" 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?

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/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/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 bination 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/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?

• javascript
• html
• angularjs
• firefox
• svg

Share Follow asked Dec 11, 2014 at 12:26 BillBill 25.6k88 gold badges9999 silver badges129129 bronze badges 7

• Did you try setting the base href dynamically via JavaScript by location.href ? – Siddharth Sharma Commented Dec 11, 2014 at 12:37
• That would break the AngularJS routing wouldn't it? – Bill Commented Dec 11, 2014 at 20:53
• Have you seen this question/answer: stackoverflow./questions/19742805/angular-and-svg-filters – Robert Longson Commented Dec 12, 2014 at 17:54
• No, I missed that one. Now I have icons being displayed, but the icons break if they are ever hidden and then shown again. To fix that I had to watch for $routeChangeSuccess and update the <use> href tags on every icon on every change which can't be good. – Bill Commented Dec 12, 2014 at 21:34
• Nevermind, technique in my last ment sometimes breaks on Chrome when updating the URL. Icons just randomly go missing. – Bill Commented Dec 13, 2014 at 21:48

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 7 +350

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.

For anybody interested in an Angular 2 solution for this same issue, I was unable to find one, so I published this small directive to NPM: https://www.npmjs./package/ng2-inline-href