Directive to load SVG images from withing the code in Angular.js

svgIcons.js

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

var icons = {
        refresh: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z",
        share: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
        };
        
  app.directive('svgIcon', function() {
          function link(scope, element, attrs) {

              scope.$watch(attrs.state, function(newValue) {
                  if (newValue === false) {
                      element.css({
                          'opacity': '.4'
                      });
                  } else {
                      element.css({
                          'opacity': '1'
                      });
                  }
              });

              function build(icon, fill, size) {
                  return '<svg class="svg_icon" viewBox="0 0 24 24" height="' + size + '" width="' + size + '">' + '<path d="' + icons[icon] + '" fill="' + fill + '"/>' + '</svg>';
              }

              function renderSVG() {
                  var size = 36;
                  var fill = "#FFF";
                  if (attrs.size) {
                      size = attrs.size;
                  }
                  if (attrs.fill) {
                      fill = attrs.fill;
                  }
                  element.html(build(attrs.path, fill, size));
              }

              renderSVG();
          }

          return {
              link: link,
              restrict: 'E'
          };

      });