base href + SVG Sprites = Not working on Firefox

Question

I'm using a technique I found on CSS Tricks ( https://css-tricks.com/svg-sprites-use-better-icon-fonts/ ) to include my SVG sprite in my application.

It's a basic AngularJS application, I include the SVG and then I use the tag to implement the icons.

<svg class="svg-icon"><use class="icon" xlink:href="#svgSprite-iconName" /></svg>

All of this works fine in all the browsers except Firefox. After investigating, I noticed it's my base href (that I cannot remove because of the way the application is plugged into an older system) that's causing the issue:

<base href="/" />

Can anyone tell me how I can fix this problem?

Answer 1

Looks pretty much like a hack, but here's my ugly solution:

If you're using ngRoute:

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    $rootScope.locationOrigin = $location.absUrl // Don't forget to inject `$location` dependency
});

or UI-Router:

$rootScope.$on("$stateChangeStart", function (event, next, current) {
    $rootScope.locationOrigin = $location.absUrl // Don't forget to inject `$location` dependency
});

And in your index.html:

<base href="/" 
      ng-href="{{locationOrigin()}}" />