xlink:href not working in firefox

Question

I'm using xlink:href to display the svg, it's working in both safari and chrome. But not in firefox, any idea?:

<div class="cart-badge">
 <span class="icon">
  <svg>
   <use xlink:href="#shape-cart"></use>
  </svg>
 </span>
</div>

UPDATE :

I have the base set here in index

<script type="text/javascript">
var baseDom = document.createElement('base');

var headDom = document.querySelector('head');

baseDom.setAttribute('href','/');

if(document.querySelector('base')===null)
{
    headDom.appendChild(baseDom);
}
</script>

svg not working in firefox.

I then add $locationProvider.html5Mode({enabled: true, requireBase: false}); in the .config and totally remove the base, svg is showing, the problem now is that it wont call my api without the base.

Answer 1

Use direct svg i.e the path not the

<use xlink:href=""></use>