Merge pull request #447 from metabase/sean_iconnery

use a single source of truth for icon paths

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

-<svg id="list" viewBox="0 0 32 32" fill="currentcolor" ng-attr-width="{{width}}" ng-attr-height="{{height}}">
-    <path d="M3 8 A3 3 0 0 0 9 8 A3 3 0 0 0 3 8 M12 6 L28 6 L28 10 L12 10z M3 16 A3 3 0 0 0 9 16 A3 3 0 0 0 3 16 M12 14 L28 14 L28 18 L12 18z M3 24 A3 3 0 0 0 9 24 A3 3 0 0 0 3 24 M12 22 L28 22 L28 26 L12 26z "></path>
-</svg>

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

-<svg id="search" viewBox="0 0 32 32" fill="currentcolor" ng-attr-width="{{width}}" ng-attr-height="{{height}}">
-    <path d="M12 0 A12 12 0 0 0 0 12 A12 12 0 0 0 12 24 A12 12 0 0 0 18.5 22.25 L28 32 L32 28 L22.25 18.5 A12 12 0 0 0 24 12 A12 12 0 0 0 12 0 M12 4 A8 8 0 0 1 12 20 A8 8 0 0 1 12 4  "></path>
-</svg>

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

-<svg id="star" viewBox="0 0 32 32" fill="currentcolor" ng-attr-width="{{width}}" ng-attr-height="{{height}}">
-    <path d="M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11 "></path>
-</svg>

resources/frontend_client/app/dashboard/partials/dash_view.html

@@ -10,7 +10,7 @@
                     </label>
                 </div>
                 <a class="Button borderless" ng-click="toggleDashEditMode()" ng-if="dashboard.can_write && dashcards.length > 0">
-                    <cv-grid-icon width="16px" height="16px"></cv-grid-icon>
+                    <mb-icon name="grid" width="16px" height="16px"></mb-icon>
                     <span class="px1">{{editingText}}</span>
                 </a>
             </div>
@@ -24,7 +24,7 @@
 
         <div class="text-centered my4 py4" ng-if="!dashboardLoaded">
             <div class="my4 py4 text-brand">
-                <cv-loading-icon></cv-loading-icon>
+                <mb-loading-icon></mb-loading-icon>
                 <h1 class="text-normal text-grey-2">Loading...</h1>
             </div>
         </div>
@@ -39,9 +39,7 @@
                 <ul id="dashboard_list">
                     <li class="Dash-card" gridster-item="dashcard" ng-repeat="(index, dashcard) in dashcards">
                         <a class="DashCard-remove" ng-click="removeCard(index)">
-                            <span class="DashCard-removeIcon">
-                                <cv-close-icon width="12px" height="12px"></cv-close-icon>
-                            </span>
+                            <mb-icon name="close" class="DashCard-removeIcon"  width="12px" height="12px"></mb-icon>
                         </a>
                         <cv-card card="dashcard.card" card-data="dashcard.cardData.data" card-settings="cardSettings" index="index" wait-for-gridster />
                     </li>

resources/frontend_client/app/dashboard/partials/modal_add_to_dashboard.html

 <div>
     <div class="Form-group border-bottom">
         <div class="Button borderless float-right" ng-click='close()'>
-            <cv-close-icon width="18px" height="18px"></cv-close-icon>
+            <mb-icon name="close" width="18px" height="18px"></mb-icon>
         </div>
         <h3 class="text-normal">Add <span class="text-bold">"{{card.name}}"</span> to dashboard</h3>
     </div>

resources/frontend_client/app/directives.js

@@ -145,7 +145,7 @@ CorvusDirectives.directive('mbActionButton', ['$timeout', '$compile', function (
                 element.addClass('Button--waiting');
 
                 // activate spinner
-                var loadingIcon = angular.element('<cv-loading-icon width="12px" height="12px"></cv-loading-icon>');
+                var loadingIcon = angular.element('<mb-loading-icon width="12px" height="12px"></mb-loading-icon>');
                 element.append(loadingIcon);
                 $compile(loadingIcon)(scope);
 
@@ -159,7 +159,7 @@ CorvusDirectives.directive('mbActionButton', ['$timeout', '$compile', function (
                     element.text(successText);
                     element.removeClass('Button--waiting');
                     element.addClass('Button--success');
-                    var checkIcon = angular.element('<cv-check-icon width="12px" height="12px"></cv-check-icon>');
+                    var checkIcon = angular.element('<mb-icon name="check" width="12px" height="12px"></mb-icon>');
                     element.prepend(checkIcon);
                     $compile(checkIcon)(scope);
 
@@ -225,7 +225,7 @@ NavbarDirectives.directive('mbProfileLink', [function () {
                                 '<span class="UserNick">' +
                                     '<span class="UserInitials NavItem-text">{{initials}}</span> ' +
                                 '</span>' +
-                                '<cv-chevron-down-icon class="Dropdown-chevron ml1" width="8px" height="8px"></cv-chevron-down-icon>' +
+                                '<mb-icon name="chevrondown" class="Dropdown-chevron ml1" width="8px" height="8px"></mb-icon>' +
                             '</a>' +
                             '<ul class="Dropdown-content right">' +
                                 '<li><a class="link" href="/user/edit_current">Account Settings</a></li>' +

resources/frontend_client/app/explore/partials/data_grid.html

@@ -32,7 +32,7 @@
                     <li class="Pill Pill--filled mr1 inline-block clearfix" ng-repeat="filter in queryFilters() track by $index">
                         <span>{{getFilterColumnName(filter)}}: {{filter[2]}}</span>
                         <a class="Pill-action" href="#" ng-click="removeFilter($index)">
-                            <cv-close-icon width="12px" height="12px"></cv-close-icon>
+                            <mb-icon name="close" width="12px" height="12px"></mb-icon>
                         </a>
                     </li>
             </ul>
@@ -40,7 +40,7 @@
             <!-- add filter button/dropdown -->
             <div class="Dropdown inline-block" dropdown is-open="filtersOpen">
                 <a class="Pill link mr1" href="#" dropdown-toggle ng-click="toggleNewFilters()">
-                    <cv-add-icon width="12px" height="12px"></cv-add-icon>
+                    <mb-icon name="add" width="12px" height="12px"></mb-icon>
                     Filter
                 </a>
                 <div class="Dropdown-content" ng-click="handleDropdownInput($event)">

resources/frontend_client/app/explore/partials/widget_advanced_aggregation.html

@@ -21,7 +21,7 @@
         <ul id="breakout_list">
             <li class="py1 block clearfix" ng-repeat="breakout_field in query.breakout track by $index">
                 <a class="text-grey-2 float-right" href="#" ng-if="!readonly" ng-click="removeDimension($index)">
-                    <cv-close-icon class="mt1" width="16px" height="16px"></cv-close-icon>
+                    <mb-icon name="close" class="mt1" width="16px" height="16px"></mb-icon>
                 </a>
                 <label class="Select">
                     <select ng-model="query.breakout[$index]" ng-options="br[0] as br[1] for br in table.breakout_options.fields" ng-disabled="readonly">

resources/frontend_client/app/explore/partials/widget_fields.html

@@ -4,7 +4,7 @@
         <ul>
             <li class="py1 clearfix" ng-repeat="field in query.fields track by $index">
                 <a class="text-grey-2 float-right" ng-if="!readonly" href="#" ng-click="removeField($index)">
-                    <cv-close-icon width="16px" height="16px"></cv-close-icon>
+                    <mb-icon name="close" width="16px" height="16px"></mb-icon>
                 </a>
                 <label class="Select" for="id_sort_by_field">
                     <select id="id_sort_by_field" ng-model="field" ng-options="field.id as field.name for field in table.fields"

resources/frontend_client/app/explore/partials/widget_filter.html

@@ -5,7 +5,7 @@
             <li class="FilterClause py1 clearfix" ng-repeat="table_filter in wrapped_filters()">
                 <div ng-if="table_filter != 'AND'">
                     <a class="text-grey-2 float-right" ng-if="!readonly" href="#" ng-click="removeFilter($index)">
-                        <cv-close-icon width="16px" height="16px"></cv-close-icon>
+                        <mb-icon name="close" width="16px" height="16px"></mb-icon>
                     </a>
                     <label class="Select" for="id_filtered_field">
                         <select id="id_filtered_field" ng-model="table_filter[1]" ng-options="field.id as field.name for field in table.fields" ng-disabled="readonly">

resources/frontend_client/app/explore/partials/widget_sort_by.html

@@ -4,7 +4,7 @@
         <ul>
             <li class="py1 clearfix" ng-repeat="sortByColumn in order_by">
                 <a class="text-grey-2 float-right" ng-if="!readonly" href="#" ng-click="removeSortBy($index)">
-                    <cv-close-icon width="16px" height="16px"></cv-close-icon>
+                    <mb-icon name="close" width="16px" height="16px"></mb-icon>
                 </a>
                 <label class="Select" for="id_sort_by_field">
                     <select id="id_sort_by_field" ng-model="sortByColumn[0]" ng-options="field.id as field.name for field in table.fields"

resources/frontend_client/app/icon_paths.js

+'use strict';
+
+/*
+    Metabase Icon Paths
+    -----
+
+    These paths represent the current canonical icon set for Metabase.and are referenced by icons
+    used in both React and Angular components as a central source of truth.
+
+    USAGE:
+
+*/
+
+var ICON_PATHS = {
+    add: 'M19,13 L19,2 L14,2 L14,13 L2,13 L2,18 L14,18 L14,30 L19,30 L19,18 L30,18 L30,13 L19,13 Z',
+    addtodash: [
+        'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z',
+        'M17,15.5 L17,10 L15,10 L15,15.5 L9.5,15.5 L9.5,17.5 L15,17.5 L15,23 L17,23 L17,17.5 L22.5,17.5 L22.5,15.5 L17,15.5 Z',
+    ],
+    cards: 'M16.5,11 C16.1340991,11 15.7865579,10.9213927 15.4733425,10.7801443 L7.35245972,21.8211652 C7.7548404,22.264891 8,22.8538155 8,23.5 C8,24.8807119 6.88071187,26 5.5,26 C4.11928813,26 3,24.8807119 3,23.5 C3,22.1192881 4.11928813,21 5.5,21 C5.87370843,21 6.22826528,21.0819977 6.5466604,21.2289829 L14.6623495,10.1950233 C14.2511829,9.74948188 14,9.15407439 14,8.5 C14,7.11928813 15.1192881,6 16.5,6 C17.8807119,6 19,7.11928813 19,8.5 C19,8.96980737 18.8704088,9.4093471 18.6450228,9.78482291 L25.0405495,15.4699905 C25.4512188,15.1742245 25.9552632,15 26.5,15 C27.8807119,15 29,16.1192881 29,17.5 C29,18.8807119 27.8807119,20 26.5,20 C25.1192881,20 24,18.8807119 24,17.5 C24,17.0256697 24.1320984,16.5821926 24.3615134,16.2043506 L17.9697647,10.5225413 C17.5572341,10.8228405 17.0493059,11 16.5,11 Z M5.5,25 C6.32842712,25 7,24.3284271 7,23.5 C7,22.6715729 6.32842712,22 5.5,22 C4.67157288,22 4,22.6715729 4,23.5 C4,24.3284271 4.67157288,25 5.5,25 Z M26.5,19 C27.3284271,19 28,18.3284271 28,17.5 C28,16.6715729 27.3284271,16 26.5,16 C25.6715729,16 25,16.6715729 25,17.5 C25,18.3284271 25.6715729,19 26.5,19 Z M16.5,10 C17.3284271,10 18,9.32842712 18,8.5 C18,7.67157288 17.3284271,7 16.5,7 C15.6715729,7 15,7.67157288 15,8.5 C15,9.32842712 15.6715729,10 16.5,10 Z',
+    check: 'M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z ',
+    chevrondown: 'M1 12 L16 26 L31 12 L27 8 L16 18 L5 8 z ',
+    chevronright: 'M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z ',
+    close: 'M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z ',
+    dashboards: 'M17,5.49100518 L17,10.5089948 C17,10.7801695 17.2276528,11 17.5096495,11 L26.4903505,11 C26.7718221,11 27,10.7721195 27,10.5089948 L27,5.49100518 C27,5.21983051 26.7723472,5 26.4903505,5 L17.5096495,5 C17.2281779,5 17,5.22788048 17,5.49100518 Z M18.5017326,14 C18.225722,14 18,13.77328 18,13.4982674 L18,26.5017326 C18,26.225722 18.22672,26 18.5017326,26 L5.49826741,26 C5.77427798,26 6,26.22672 6,26.5017326 L6,13.4982674 C6,13.774278 5.77327997,14 5.49826741,14 L18.5017326,14 Z M14.4903505,6 C14.2278953,6 14,5.78028538 14,5.49100518 L14,10.5089948 C14,10.2167107 14.2224208,10 14.4903505,10 L5.50964952,10 C5.77210473,10 6,10.2197146 6,10.5089948 L6,5.49100518 C6,5.78328929 5.77757924,6 5.50964952,6 L14.4903505,6 Z M26.5089948,22 C26.2251201,22 26,21.7774008 26,21.4910052 L26,26.5089948 C26,26.2251201 26.2225992,26 26.5089948,26 L21.4910052,26 C21.7748799,26 22,26.2225992 22,26.5089948 L22,21.4910052 C22,21.7748799 21.7774008,22 21.4910052,22 L26.5089948,22 Z M26.5089948,14 C26.2251201,14 26,13.7774008 26,13.4910052 L26,18.5089948 C26,18.2251201 26.2225992,18 26.5089948,18 L21.4910052,18 C21.7748799,18 22,18.2225992 22,18.5089948 L22,13.4910052 C22,13.7748799 21.7774008,14 21.4910052,14 L26.5089948,14 Z M26.4903505,6 C26.2278953,6 26,5.78028538 26,5.49100518 L26,10.5089948 C26,10.2167107 26.2224208,10 26.4903505,10 L17.5096495,10 C17.7721047,10 18,10.2197146 18,10.5089948 L18,5.49100518 C18,5.78328929 17.7775792,6 17.5096495,6 L26.4903505,6 Z M5,13.4982674 L5,26.5017326 C5,26.7769181 5.21990657,27 5.49826741,27 L18.5017326,27 C18.7769181,27 19,26.7800934 19,26.5017326 L19,13.4982674 C19,13.2230819 18.7800934,13 18.5017326,13 L5.49826741,13 C5.22308192,13 5,13.2199066 5,13.4982674 Z M5,5.49100518 L5,10.5089948 C5,10.7801695 5.22765279,11 5.50964952,11 L14.4903505,11 C14.7718221,11 15,10.7721195 15,10.5089948 L15,5.49100518 C15,5.21983051 14.7723472,5 14.4903505,5 L5.50964952,5 C5.22817786,5 5,5.22788048 5,5.49100518 Z M21,21.4910052 L21,26.5089948 C21,26.7801695 21.2278805,27 21.4910052,27 L26.5089948,27 C26.7801695,27 27,26.7721195 27,26.5089948 L27,21.4910052 C27,21.2198305 26.7721195,21 26.5089948,21 L21.4910052,21 C21.2198305,21 21,21.2278805 21,21.4910052 Z M21,13.4910052 L21,18.5089948 C21,18.7801695 21.2278805,19 21.4910052,19 L26.5089948,19 C26.7801695,19 27,18.7721195 27,18.5089948 L27,13.4910052 C27,13.2198305 26.7721195,13 26.5089948,13 L21.4910052,13 C21.2198305,13 21,13.2278805 21,13.4910052 Z',
+    download: [
+        'M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z',
+        'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z'
+    ],
+    expand: 'M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z ',
+    explore: 'M16.4796545,16.298957 L16.4802727,23.0580389 L16.4802727,23.0580389 C17.3528782,23.2731238 18,24.0609902 18,25 C18,26.1045695 17.1045695,27 16,27 C14.8954305,27 14,26.1045695 14,25 C14,24.0751922 14.6276951,23.2969904 15.4802906,23.0681896 L15.4796772,16.3617812 L15.4796772,16.3617812 L9.42693239,19.2936488 C9.54250354,19.9090101 9.36818637,20.5691625 8.90013616,21.0538426 C8.13283771,21.8484034 6.86670062,21.8705039 6.07213982,21.1032055 C5.27757902,20.335907 5.25547851,19.06977 6.02277696,18.2752092 C6.79007541,17.4806484 8.0562125,17.4585478 8.8507733,18.2258463 C8.90464955,18.277874 8.95497425,18.3321952 9.00174214,18.3885073 L14.8957415,15.5335339 L8.95698016,12.663638 C8.54316409,13.1288103 7.91883307,13.3945629 7.25239963,13.3245179 C6.15388108,13.2090589 5.35695382,12.2249357 5.47241277,11.1264172 C5.58787172,10.0278986 6.57199493,9.23097136 7.67051349,9.34643031 C8.76903204,9.46188927 9.5659593,10.4460125 9.45050035,11.544531 C9.44231425,11.6224166 9.42976147,11.6987861 9.41311084,11.7734218 L15.4795257,14.705006 L15.4789062,7.93143834 C14.6270158,7.70216703 14,6.9243072 14,6 C14,4.8954305 14.8954305,4 16,4 C17.1045695,4 18,4.8954305 18,6 C18,6.93950562 17.3521946,7.72770818 16.4788902,7.94230133 L16.4795143,14.7663758 L22.5940736,11.8045661 C22.4397082,11.1620316 22.6068068,10.4567329 23.0998638,9.94615736 C23.8671623,9.15159656 25.1332994,9.12949606 25.9278602,9.8967945 C26.722421,10.664093 26.7445215,11.93023 25.977223,12.7247908 C25.2099246,13.5193516 23.9437875,13.5414522 23.1492267,12.7741537 C23.120046,12.7459743 23.0919072,12.717122 23.0648111,12.687645 L17.1917924,15.5324558 L23.0283963,18.3529842 C23.4420438,17.8775358 24.073269,17.604607 24.7476004,17.6754821 C25.8461189,17.7909411 26.6430462,18.7750643 26.5275872,19.8735828 C26.4121283,20.9721014 25.4280051,21.7690286 24.3294865,21.6535697 C23.230968,21.5381107 22.4340407,20.5539875 22.5494996,19.455469 C22.5569037,19.3850239 22.56788,19.315819 22.5822296,19.2480155 L16.4796545,16.298957 Z M16.0651172,6.99791382 C16.5870517,6.96436642 17,6.53040783 17,6 C17,5.44771525 16.5522847,5 16,5 C15.4477153,5 15,5.44771525 15,6 C15,6.53446591 15.4192913,6.9710011 15.9468816,6.99861337 L16.0651172,6.99791382 L16.0651172,6.99791382 Z M16,26 C16.5522847,26 17,25.5522847 17,25 C17,24.4477153 16.5522847,24 16,24 C15.4477153,24 15,24.4477153 15,25 C15,25.5522847 15.4477153,26 16,26 Z M6.56266251,20.102897 C6.80476821,20.5992873 7.40343746,20.8054256 7.89982771,20.5633199 C8.39621795,20.3212142 8.60235631,19.722545 8.36025061,19.2261547 C8.11814491,18.7297645 7.51947566,18.5236261 7.02308541,18.7657318 C6.52669517,19.0078375 6.32055681,19.6065068 6.56266251,20.102897 Z M23.6397494,11.7738453 C23.8818551,12.2702355 24.4805243,12.4763739 24.9769146,12.2342682 C25.4733048,11.9921625 25.6794432,11.3934932 25.4373375,10.897103 C25.1952318,10.4007127 24.5965625,10.1945744 24.1001723,10.4366801 C23.603782,10.6787858 23.3976437,11.277455 23.6397494,11.7738453 Z M25.4373375,20.102897 C25.6794432,19.6065068 25.4733048,19.0078375 24.9769146,18.7657318 C24.4805243,18.5236261 23.8818551,18.7297645 23.6397494,19.2261547 C23.3976437,19.722545 23.603782,20.3212142 24.1001723,20.5633199 C24.5965625,20.8054256 25.1952318,20.5992873 25.4373375,20.102897 Z M8.36025061,11.7738453 C8.60235631,11.277455 8.39621795,10.6787858 7.89982771,10.4366801 C7.40343746,10.1945744 6.80476821,10.4007127 6.56266251,10.897103 C6.32055681,11.3934932 6.52669517,11.9921625 7.02308541,12.2342682 C7.51947566,12.4763739 8.11814491,12.2702355 8.36025061,11.7738453 Z',
+    filter: 'M6.57883011,7.57952565 L1.18660637e-12,-4.86721774e-13 L16,-4.92050845e-13 L9.42116989,7.57952565 L9.42116989,13.5542169 L6.57883011,15 L6.57883011,7.57952565 Z',
+    gear: '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',
+    grid: 'M2 2 L10 2 L10 10 L2 10z M12 2 L20 2 L20 10 L12 10z M22 2 L30 2 L30 10 L22 10z M2 12 L10 12 L10 20 L2 20z M12 12 L20 12 L20 20 L12 20z M22 12 L30 12 L30 20 L22 20z M2 22 L10 22 L10 30 L2 30z M12 22 L20 22 L20 30 L12 30z M22 22 L30 22 L30 30 L22 30z',
+    list: 'M3 8 A3 3 0 0 0 9 8 A3 3 0 0 0 3 8 M12 6 L28 6 L28 10 L12 10z M3 16 A3 3 0 0 0 9 16 A3 3 0 0 0 3 16 M12 14 L28 14 L28 18 L12 18z M3 24 A3 3 0 0 0 9 24 A3 3 0 0 0 3 24 M12 22 L28 22 L28 26 L12 26z',
+    search: 'M12 0 A12 12 0 0 0 0 12 A12 12 0 0 0 12 24 A12 12 0 0 0 18.5 22.25 L28 32 L32 28 L22.25 18.5 A12 12 0 0 0 24 12 A12 12 0 0 0 12 0 M12 4 A8 8 0 0 1 12 20 A8 8 0 0 1 12 4  ',
+    star: 'M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11',
+};
+
+/* module.exports = ICON_PATHS */

resources/frontend_client/app/query_builder/icon.react.js

 'use strict';
+/* global ICON_PATHS */
 
 var Icon = React.createClass({
     displayName: 'Icon',
-    iconPaths: {
-        addtodash: [
-            'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z',
-            'M17,15.5 L17,10 L15,10 L15,15.5 L9.5,15.5 L9.5,17.5 L15,17.5 L15,23 L17,23 L17,17.5 L22.5,17.5 L22.5,15.5 L17,15.5 Z',
-        ],
-        check: 'M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z ',
-        close: 'M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z ',
-        download: [
-            'M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z',
-            'M16,31 L16,31 C24.2842712,31 31,24.2842712 31,16 C31,7.71572875 24.2842712,1 16,1 C7.71572875,1 1,7.71572875 1,16 C1,24.2842712 7.71572875,31 16,31 L16,31 Z M16,32 L16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 L16,32 Z'
-        ],
-        expand: 'M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z ',
-        filter: 'M6.57883011,7.57952565 L1.18660637e-12,-4.86721774e-13 L16,-4.92050845e-13 L9.42116989,7.57952565 L9.42116989,13.5542169 L6.57883011,15 L6.57883011,7.57952565 Z',
-    },
     getDefaultProps: function () {
        return {
           width: 32,
@@ -24,13 +11,13 @@ var Icon = React.createClass({
        };
     },
     render: function () {
-        var iconPath = this.iconPaths[this.props.name],
+        var iconPath = ICON_PATHS[this.props.name],
             path;
 
         // handle multi path icons which appear as non strings
         if(typeof(iconPath) != 'string') {
             // create a path for each path present
-            path = iconPath.map(function (path) {
+            path = ICON_PATHS.map(function (path) {
                return (<path d={path} /> );
             });
         } else {

resources/frontend_client/app/setup/partials/setup_info.html

 <!-- SETUP NAV -->
 <nav class="SetupNav text-brand py4 flex layout-centered">
-    <cv-logo-icon class="mr2" width="41" height="51"></cv-logo-icon>
+    <mb-logo-icon class="mr2" width="41" height="51"></mb-logo-icon>
     <span class="Setup-brandWordMark">metabase</span>
 </nav>
 
@@ -10,7 +10,7 @@
                 <div class="flex align-center py3" ng-click="activeStep = 'user'">
                     <span class="SetupStep-indicator flex layout-centered absolute bordered">
                         <span class="SetupStep-number">1</span>
-                        <cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
+                        <mb-icon name="check" class="SetupStep-check" width="16px" height="16px"></mb-icon>
                     </span>
                     <h3 class="SetupStep-title ml4">{{userStepText}}</h3>
                 </div>
@@ -67,7 +67,7 @@
             <div class="flex align-center py3">
                 <span class="SetupStep-indicator flex layout-centered absolute bordered">
                     <span class="SetupStep-number">2</span>
-                    <cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
+                    <mb-icon name="check" class="SetupStep-check" width="16px" height="16px"></mb-icon>
                 </span>
                 <h3 class="SetupStep-title ml4">{{databaseStepText}}</h3>
             </div>

resources/frontend_client/app/setup/partials/setup_welcome.html

 <section class="wrapper wrapper-max-sm flex layout-centered full-height flex-column">
-  <cv-logo-icon width="109px" height="138px"></cv-logo-icon>
+  <mb-logo-icon width="109px" height="138px"></mb-logo-icon>
   <div class="WelcomeMessage text-centered">
       <h1 class="WelcomeMessage-title text-brand">Welcome to Metabase</h1>
       <p class="WelcomeMessage-subTitle text-body">Looks like everything is installed and working great. We’ll quickly get to know you, connect you to your data, and we’ll have you on your way  to your data.</p>

resources/frontend_client/app/superadmin/organization/partials/org_detail.html

 <div class="wrapper">
     <section class="Breadcrumbs">
         <a class="Breadcrumb Breadcrumb--path" href="/superadmin/organization/">Organizations</a>
-        <cv-chevron-right-icon class="Breadcrumb-divider" width="12px" height="12px"></cv-chevron-right-icon>
+        <mb-icon name="chevronright" class="Breadcrumb-divider" width="12px" height="12px"></mb-icon>
         <h2 class="Breadcrumb Breadcrumb--page" ng-if="!organization.id">Add Organization</h2>
         <h2 class="Breadcrumb Breadcrumb--page" ng-if="organization.id">{{organization.name}}</h2>
     </section>

resources/frontend_client/app/superadmin/organization/partials/org_list.html

@@ -17,7 +17,7 @@
             <tbody>
                 <tr ng-show="!organizations">
                     <td colspan=4>
-                        <cv-loading-icon></cv-loading-icon>
+                        <mb-loading-icon></mb-loading-icon>
                         <h3>Loading ...</h3>
                     </td>
                 </tr>

resources/frontend_client/app/superadmin/settings/partials/settings.html

@@ -16,7 +16,7 @@
             <tbody>
                 <tr ng-show="!settings">
                     <td colspan=4>
-                        <cv-loading-icon></cv-loading-icon>
+                        <mb-loading-icon></mb-loading-icon>
                         <h3>Loading ...</h3>
                     </td>
                 </tr>

resources/frontend_client/index.html

@@ -27,7 +27,7 @@
                     <div class="NavItem Dropdown float-left" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
                         <span dropdown-toggle>
                             <span class="NavItem-text" ng-bind="currentOrg.name"></span>
-                            <cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
+                            <mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
                         </span>
                         <ul class="Dropdown-content">
                             <li ng-repeat="organization in userMemberOf">
@@ -38,25 +38,19 @@
                     <ul class="float-left ml4">
                         <li class="inline-block">
                             <a class="NavItem NavItem-withIcon" cv-org-href="/dash/" selectable-nav-item="dashboards">
-                                <div class="IconWrapper">
-                                    <cv-dashboards-icon></cv-dashboards-icon>
-                                </div>
+                                <mb-icon class="IconWrapper" name="dashboards"/></mb-icon>
                                 <span class="NavItem-text">Dashboards</span>
                             </a>
                         </li>
                         <li class="inline-block">
                             <a class="NavItem NavItem-withIcon" cv-org-href="/card/" selectable-nav-item="cards">
-                                <div class="IconWrapper">
-                                    <cv-cards-icon></cv-cards-icon>
-                                </div>
+                                <mb-icon class="IconWrapper" name="cards"></mb-icon>
                                 <span class="NavItem-text">Cards</span>
                             </a>
                         </li>
                         <li class="inline-block">
                             <a class="NavItem NavItem-withIcon" cv-org-href="/explore/" selectable-nav-item="explore">
-                                <div class="IconWrapper">
-                                    <cv-explore-icon></cv-explore-icon>
-                                </div>
+                                <mb-icon class="IconWrapper" name="explore"></mb-icon>
                                 <span class="NavItem-text">Explore</span>
                             </a>
                         </li>
@@ -66,7 +60,7 @@
                             <a class="NavItem" selectable-nav-item="settings" dropdown-toggle>
                                 <span class="NavItem-text" ng-if="!user.first_name">Me</span>
                                 <span class="NavItem-text" ng-if="user.first_name">{{user.first_name}}</span>
-                                <cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
+                                <mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
                             </a>
                             <ul class="Dropdown-content right">
                                 <li class="" ><a class="link" href="/user/edit_current">Account Settings</a></li>
@@ -84,14 +78,14 @@
                 <div class="wrapper flex align-center">
                     <!-- org title -->
                     <div class="NavTitle flex align-center" ng-if="!user.is_multi_org">
-                        <cv-gear-icon class="AdminGear" width="22px" height="22px"></cv-gear-icon>
+                        <mb-icon name="gear" class="AdminGear" width="22px" height="22px"></mb-icon>
                         <span class="NavItem-text">{{currentOrg.name}} Admin</span>
                     </div>
                     <div class="NavTitle flex align-center Dropdown" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
-                        <cv-gear-icon class="AdminGear" width="22px" height="22px"></cv-gear-icon>
+                        <mb-icon name="gear" class="AdminGear" width="22px" height="22px"></mb-icon>
                         <span dropdown-toggle>
                             <span class="NavItem-text">{{currentOrg.name}} Admin</span>
-                            <cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
+                            <mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
                         </span>
                         <ul class="Dropdown-content left">
                             <li ng-repeat="organization in userMemberOf">
@@ -128,7 +122,7 @@
             <nav class="AdminNav" ng-show="nav === 'superadmin'">
                 <div class="wrapper flex align-center">
                     <div class="NavTitle flex align-center">
-                        <cv-gear-icon class="AdminGear" width="22px" height="22px"></cv-gear-icon>
+                        <mb-icon name="gear" class="AdminGear" width="22px" height="22px"></mb-icon>
                         <span class="NavItem-text ml1">Site Administration</span>
                     </div>