new angular icon directive

resources/frontend_client/app/components/icons/icons.js

 'use strict';
 
-// wrap in a closure so we don't expose any of these functions to the outside world
-(function() {
-    // define our icons. currently uppercase to handle directive names properly
-    var icons = [
-        'Add',
-        'Cards',
-        'Close',
-        'ChevronDown',
-        'ChevronRight',
-        'Check',
-        'Dashboards',
-        'Explore',
-        'Gear',
-        'Grid',
-        'List',
-        'Loading',
-        'Logo',
-        'Search',
-        'Star'
-    ];
+/* global ICON_PATHS */
 
-    // ensure icons have proper defaults during the compile step if none are supplied
-    function iconCompile (element, attrs) {
-        var defaultWidth = '32px',
-            defaultHeight = '32px';
+angular.module('corvus.components')
+    .directive('mbIcon', function () {
 
-        attrs.width = attrs.width || defaultWidth;
-        attrs.height = attrs.height || defaultHeight;
-    }
+        return {
+            restrict: 'E',
+            template: '<svg viewBox="0 0 32 32" ng-attr-width="{{width}}" ng-attr-height="{{height}}" fill="currentcolor"><path ng-attr-d="{{path}}" /></svg>',
+            scope: {
+                width: '@?',  // a value in PX to define the width of the icon
+                height: '@?', // a value in PX to define the height of the icon
+                name: '@',    // the name of the icon to be referended from the ICON_PATHS object
+                path: '@'
+            },
+            compile: function (element, attrs) {
+                var icon = ICON_PATHS[attrs.name];
 
-    // generate the directive
-    function generateIconDirective (name) {
-        var templatePrefix = '/app/components/icons/';
-
-        return angular.module('corvus.components')
-                    .directive('cv' + name + 'Icon', function () {
-                        return {
-                            restrict: 'E',
-                            templateUrl: templatePrefix + name.toLowerCase() + '.html',
-                            scope: {
-                                width: '@?', // a value in PX to define the width of the icon
-                                height: '@?' // a value in PX to define the height of the icon
-                            },
-                            compile: iconCompile
-                        };
-                    });
-    }
-
-    // for every defined icon, generate a directive
-    for(var icon in icons) {
-        generateIconDirective(icons[icon]);
-    }
-
-}());
+                // set defaults for width/height in case no width or height are specified
+                attrs.width = attrs.width || '32px';
+                attrs.height = attrs.height || '32px';
+                attrs.path = icon;
+            }
+        };
+    });