Inline svg as directive (Firefox issue)

In my project, I am using Inline svgs as follows:

HTML

<div style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="dropdown" viewBox="0 0 3.359 1.929"><path d="M1.68 1.929a.29.29 0 0 1-.204-.083L.085.484a.28.28 0 0 1 0-.401.293.293 0 0 1 .409 0L1.68 1.244 2.865.083a.294.294 0 0 1 .41 0 .28.28 0 0 1 0 .401l-1.39 1.361a.3.3 0 0 1-.205.084z"></path></symbol>
  </svg>
</div>
<div one-svg svg-href="'dropdown'"></div>

JS

var app = angular.module('app', []);

app.directive('oneSvg', function() {
    return {
        templateUrl: 'inline-svg.html',
        scope: {
            svgHref: "=",
            svgClass: "="
        }
    };
});

inline-svg.html

<svg ng-class="svgClass">
    <use ng-href="{{ '#' + svgHref }}" ng-attr-href="{{ '#' + svgHref }}" href=""></use>
</svg>

Here is the fiddle

The above created directive is working only in Chrome and IE10 but not in Firefox (v 50.1.0).

If I add the inline SVG without directive, it is working fine in Firefox. Please help me to make the directive work even in Firefox.

See the changes in this PLUNKER.
It worked for me on FireFox, Chrome and Safari.

Html:

<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" <svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <defs>
    <symbol id="dropdown" viewBox="0 0 3.359 1.929">
      <path d="M1.68 1.929a.29.29 0 0 1-.204-.083L.085.484a.28.28 0 0 1 0-.401.293.293 0 0 1 .409 0L1.68 1.244 2.865.083a.294.294 0 0 1 .41 0 .28.28 0 0 1 0 .401l-1.39 1.361a.3.3 0 0 1-.205.084z"></path>
    </symbol>
  </defs>
</svg>

<div one-svg="dropdown"></div>

Directive:

app.directive('oneSvg', function() {
    return {
        template: '<svg ng-class="svgClass"><use xlink:href="{{ \'#\' + href }}"></use></svg>',
        scope: {
            href: "@oneSvg",
            svgClass: "=?"
        }
    };
});