6

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?

Bill
  • 25,119
  • 8
  • 94
  • 125
  • Did you try setting the base href dynamically via JavaScript by location.href ? – Siddharth Sharma Dec 11 '14 at 12:37
  • That would break the AngularJS routing wouldn't it? – Bill Dec 11 '14 at 20:53
  • Have you seen this question/answer: http://stackoverflow.com/questions/19742805/angular-and-svg-filters – Robert Longson Dec 12 '14 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 `` href tags on every icon on every change which can't be good. – Bill Dec 12 '14 at 21:34
  • Nevermind, technique in my last comment sometimes breaks on Chrome when updating the URL. Icons just randomly go missing. – Bill Dec 13 '14 at 21:48
  • Just to throw it out there - instead of inlining SVG, you could create an [icon font](https://icomoon.io/) and use that. – hon2a Dec 13 '14 at 22:00
  • @Bill I am struggling with the same issue. Tried using the approach to set requireBase as false. Say the path was localhost/path1 which works fine everytime however, if the path is localhost/path1/path2 the relative path becomes localhost/path1 and thus all script loading or other links fail. Did you face a similar scenario? – Saurav Apr 29 '16 at 19:16

2 Answers2

7

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.

sam stone
  • 703
  • 5
  • 16
  • 2
    Based on that bug, this did it for me: `$locationProvider.html5Mode({enabled: true, requireBase: false});`. I can then remove the `base` tag and everything works. – Bill Dec 14 '14 at 02:57
0

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.com/package/ng2-inline-href

tsmith18256
  • 628
  • 1
  • 6
  • 13