I am trying to use SVG icons with Angularjs with html5Mode set to true. To use the html5Mode , you need to set basePath in the header of the html document.
<base href="/">
Then I upload all my svg icons to the index.html page as characters.
<?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 cannot figure out how to make this work sequentially in Firefox. In Chrome and IE, I can always just set svg use href to the svg character id.
<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 appear in Firefox. From the previous question, I was told that this is due to the base tag. So I tried to set the base tag to an absolute URL
<base href="http://localhost:5080/">
And then I tried every URL combination for the use tag. I finally got it to work if I use an absolute URL based on the source path from which the index.html page was loaded.
For example, if the page was loaded from http://localhost:5080/user , then the following icons will be displayed to configure the use tag, as shown below:
<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 fine when the user clicks on the application. However, if the user then refreshes the page to http://localhost:5080/photos , all the icons are broken again, because href now incorrect. So, I started caching the original URL from which the index.html page was loaded and with that. However, even then the update on some pages again breaks all the icons.
Using html5Mode with AngularJS, is it correct to set the base tag and set the use href tag correctly so that the icons display in IE, Chrome, and Firefox?