make the gear icon a directive.

resources/frontend_client/app/components/icons/gear.html

+<svg id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentcolor" ng-attr-width="{{width}}" ng-attr-height="{{height}}">
+    <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
+</svg>
\ No newline at end of file

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

@@ -11,6 +11,7 @@
         'ChevronRight',
         'Dashboards',
         'Explore',
+        'Gear',
         'Grid',
         'List',
         'Loading',

resources/frontend_client/index.html

@@ -89,18 +89,12 @@
                 <div class="wrapper flex align-center">
                     <!-- org title -->
                     <div class="NavTitle flex align-center" ng-if="!user.is_multi_org">
-                        <!-- TODO: this should be an icon directive -->
-                        <svg id="cog" class="mr1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22px" height="22px" fill="currentcolor">
-                            <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
-                        </svg>
-                        <span class="NavItem-text">{{currentOrg.name}} Admin</span>
+                        <cv-gear-icon width="22px" height="22px"></cv-gear-icon>
+                        <span class="ml1 NavItem-text">{{currentOrg.name}} Admin</span>
                     </div>
                     <div class="NavTitle Dropdown" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
-                        <!-- TODO: this should be an icon directive -->
-                        <svg class="mr1" id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22px" height="22px"fill="currentcolor">
-                            <path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
-                        </svg>
-                        <span dropdown-toggle>
+                        <cv-gear-icon width="22px" height="22px"></cv-gear-icon>
+                        <span class="ml1" dropdown-toggle>
                             <span class="NavItem-text">{{currentOrg.name}} Admin</span>
                             <cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
                         </span>