UI: Remove old icons (#16335)

* removed unsused grafana-icon classes, replaced grafana-icons with gicons

* replaced old dashboard and datasource icons with gicon, fixed so icons on plugin list are shown

* removed unsused grafana-icon classes, replaced grafana-icons with gicons

* replaced old dashboard and datasource icons with gicon, fixed so icons on plugin list are shown

* replaced fontawesome cog, eye, link and edit with gicons

* updated snapshot

* fixed color of cog in dashboard nav, removed icons from buttons, ran preitterier on some files

* changed opacity on getting started icons and fixed getting started button

* .5 -> 0.5 fix for prettier

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -188,6 +188,8 @@ $btn-divider-right: $dark-3;
 
 $btn-drag-image: '../img/grab_dark.svg';
 
+$navbar-btn-gicon-brightness: brightness(0.5);
+
 // Forms
 // -------------------------
 $input-bg: $input-black;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -175,6 +175,8 @@ $btn-divider-right: $gray-7;
 
 $btn-drag-image: '../img/grab_light.svg';
 
+$navbar-btn-gicon-brightness: brightness(1.5);
+
 // Forms
 // -------------------------
 $input-bg: $white;

public/app/core/components/search/search_results.html

@@ -11,7 +11,7 @@
     <i class="search-section__header__icon" ng-class="section.icon"></i>
     <span class="search-section__header__text">{{::section.title}}</span>
     <a ng-show="section.url" href="{{section.url}}" class="search-section__header__link">
-      <i class="fa fa-cog"></i>
+      <i class="gicon gicon-cog"></i>
     </a>
     <i class="fa fa-angle-down search-section__header__toggle" ng-show="section.expanded"></i>
     <i class="fa fa-angle-right search-section__header__toggle" ng-hide="section.expanded"></i>

public/app/features/alerting/AlertRuleItem.tsx

@@ -58,7 +58,7 @@ class AlertRuleItem extends PureComponent<Props> {
             <i className={iconClassName} />
           </button>
           <a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
-            <i className="icon-gf icon-gf-settings" />
+            <i className="gicon gicon-cog" />
           </a>
         </div>
       </li>

public/app/features/alerting/AlertTab.tsx

@@ -133,7 +133,7 @@ export class AlertTab extends PureComponent<Props> {
 
     const model = {
       title: 'Panel has no alert rule defined',
-      buttonIcon: 'icon-gf icon-gf-alert',
+      buttonIcon: 'gicon gicon-alert',
       onClick: this.onAddAlert,
       buttonTitle: 'Create Alert',
     };

public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap

@@ -77,7 +77,7 @@ exports[`Render should render component 1`] = `
       title="Edit alert rule"
     >
       <i
-        className="icon-gf icon-gf-settings"
+        className="gicon gicon-cog"
       />
     </a>
   </div>

public/app/features/annotations/partials/editor.html

@@ -13,8 +13,9 @@
       class="btn btn-primary"
       ng-click="ctrl.setupNew();"
       ng-if="ctrl.annotations.length > 1"
-      ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'"
-      ><i class="fa fa-plus"></i> New</a
+      ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
+      New
+    </a
     >
   </div>
 

public/app/features/dashboard/components/DashExportModal/template.html

@@ -13,10 +13,10 @@
 
 		<div class="gf-form-button-row">
 			<button type="button" class="btn gf-form-btn width-10 btn-primary" ng-click="ctrl.saveDashboardAsFile()">
-				<i class="fa fa-save"></i> Save to file
+			  Save to file
 			</button>
 			<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()">
-				<i class="fa fa-file-text-o"></i> View JSON
+			  View JSON
 			</button>
 			<a class="btn btn-link" ng-click="ctrl.dismiss()">Cancel</a>
 		</div>

public/app/features/dashboard/components/DashLinks/editor.html

@@ -11,9 +11,9 @@
     class="btn btn-primary"
     ng-click="ctrl.setupNew()"
     ng-if="ctrl.dashboard.links.length > 0"
-    ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'"
-  >
-    <i class="fa fa-plus"></i> New</a
+    ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
+    New
+  </a
   >
 </div>
 

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -236,7 +236,7 @@ export class DashNav extends PureComponent<Props> {
             <DashNavButton
               tooltip="Open original dashboard"
               classSuffix="snapshot-origin"
-              icon="fa fa-link"
+              icon="gicon gicon-link"
               href={snapshotUrl}
             />
           )}
@@ -245,7 +245,7 @@ export class DashNav extends PureComponent<Props> {
             <DashNavButton
               tooltip="Dashboard settings"
               classSuffix="settings"
-              icon="fa fa-cog"
+              icon="gicon gicon-cog"
               onClick={this.onOpenSettings}
             />
           )}

public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx

@@ -96,7 +96,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
         {canEdit && (
           <div className="dashboard-row__actions">
             <a className="pointer" onClick={this.onOpenSettings}>
-              <i className="fa fa-cog" />
+              <i className="gicon gicon-cog" />
             </a>
             <a className="pointer" onClick={this.onDelete}>
               <i className="fa fa-trash" />

public/app/features/dashboard/components/DashboardSettings/template.html

@@ -1,6 +1,6 @@
 <aside class="dashboard-settings__aside">
 	<h2 class="dashboard-settings__aside-header">
-		<i class="fa fa-cog"></i>
+		<i class="gicon gicon-cog"></i>
 		Settings
 	</h2>
 

public/app/features/dashboard/components/FolderPicker/template.html

@@ -19,7 +19,7 @@
     <button class="btn btn-inverse"
       ng-click="ctrl.createFolder($event)"
       ng-disabled="!ctrl.newFolderNameTouched || ctrl.hasValidationError">
-      <i class="fa fa-fw fa-save"></i>&nbsp;Create
+      Create
     </button>
   </div>
   <div class="gf-form" ng-if="ctrl.createNewFolder">

public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts

@@ -27,10 +27,10 @@ const template = `
       </div>
       <div class="gf-form-button-row">
         <button class="btn btn-primary" clipboard-button="ctrl.getJsonForClipboard()">
-          <i class="fa fa-clipboard"></i>&nbsp;Copy JSON to Clipboard
+          Copy JSON to Clipboard
         </button>
         <button class="btn btn-secondary" clipboard-button="ctrl.save()">
-          <i class="fa fa-save"></i>&nbsp;Save JSON to file
+          Save JSON to file
         </button>
         <a class="btn btn-link" ng-click="ctrl.dismiss();">Cancel</a>
       </div>

public/app/features/dashboard/components/ShareModal/template.html

@@ -1,186 +1,182 @@
 <div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">
-
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-share-square-o"></i>
-			<span class="p-l-1">{{modalTitle}}</span>
-		</h2>
-
-		<ul class="gf-tabs">
-			<li class="gf-tabs-item" ng-repeat="tab in tabs">
-				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
-					{{::tab.title}}
-				</a>
-			</li>
-		</ul>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
-		<div ng-include src="tab.src" class="share-modal-body"></div>
-	</div>
-
+  <div class="modal-header">
+    <h2 class="modal-header-title">
+      <i class="fa fa-share-square-o"></i>
+      <span class="p-l-1">{{ modalTitle }}</span>
+    </h2>
+
+    <ul class="gf-tabs">
+      <li class="gf-tabs-item" ng-repeat="tab in tabs">
+        <a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
+          {{::tab.title}}
+        </a>
+      </li>
+    </ul>
+
+    <a class="modal-header-close" ng-click="dismiss();">
+      <i class="fa fa-remove"></i>
+    </a>
+  </div>
+
+  <div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
+    <div ng-include src="tab.src" class="share-modal-body"></div>
+  </div>
 </div>
 
 <script type="text/ng-template" id="shareEmbed.html">
-	<div class="share-modal-header">
-		<div class="share-modal-big-icon">
-			<i class="fa fa-code"></i>
-		</div>
-		<div class="share-modal-content">
-			<div ng-include src="'shareLinkOptions.html'"></div>
-
-      <p class="share-modal-info-text">
-			 The html code below can be pasted and included in another web page. Unless anonymous access
-			 is enabled, the user viewing that page need to be signed into grafana for the graph to load.
-      </p>
-
-      <div class="gf-form-group gf-form--grow">
-				<div class="gf-form">
-					<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
-				</div>
-			</div>
-
-		</div>
-	</div>
+  <div class="share-modal-header">
+  	<div class="share-modal-big-icon">
+  		<i class="fa fa-code"></i>
+  	</div>
+  	<div class="share-modal-content">
+  		<div ng-include src="'shareLinkOptions.html'"></div>
+
+       <p class="share-modal-info-text">
+  		 The html code below can be pasted and included in another web page. Unless anonymous access
+  		 is enabled, the user viewing that page need to be signed into grafana for the graph to load.
+       </p>
+
+       <div class="gf-form-group gf-form--grow">
+  			<div class="gf-form">
+  				<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
+  			</div>
+  		</div>
+
+  	</div>
+  </div>
 </script>
 
 <script type="text/ng-template" id="shareExport.html">
-	<dash-export-modal dismiss="dismiss()"></dash-export-modal>
+  <dash-export-modal dismiss="dismiss()"></dash-export-modal>
 </script>
 
 <script type="text/ng-template" id="shareLinkOptions.html">
-	<div class="gf-form-group">
-		<gf-form-switch class="gf-form"
-			label="Current time range" label-class="width-12" switch-class="max-width-6"
-			checked="options.forCurrent" on-change="buildUrl()">
-		</gf-form-switch>
-		<gf-form-switch class="gf-form"
-			label="Template variables" label-class="width-12" switch-class="max-width-6"
-			checked="options.includeTemplateVars" on-change="buildUrl()">
-		</gf-form-switch>
-		<div class="gf-form">
-			<span class="gf-form-label width-12">Theme</span>
-			<div class="gf-form-select-wrapper width-10">
-				<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
-			</div>
-		</div>
-	</div>
+  <div class="gf-form-group">
+  	<gf-form-switch class="gf-form"
+  		label="Current time range" label-class="width-12" switch-class="max-width-6"
+  		checked="options.forCurrent" on-change="buildUrl()">
+  	</gf-form-switch>
+  	<gf-form-switch class="gf-form"
+  		label="Template variables" label-class="width-12" switch-class="max-width-6"
+  		checked="options.includeTemplateVars" on-change="buildUrl()">
+  	</gf-form-switch>
+  	<div class="gf-form">
+  		<span class="gf-form-label width-12">Theme</span>
+  		<div class="gf-form-select-wrapper width-10">
+  			<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
+  		</div>
+  	</div>
+  </div>
 </script>
 
 <script type="text/ng-template" id="shareLink.html">
-	<div class="share-modal-header">
-		<div class="share-modal-big-icon">
-			<i class="fa fa-link"></i>
-		</div>
-		<div class="share-modal-content">
-			<p class="share-modal-info-text">
-				Create a direct link to this dashboard or panel, customized with the options below.
-			</p>
-			<div ng-include src="'shareLinkOptions.html'"></div>
-			<div>
-				<div class="gf-form-group">
-					<div class="gf-form-inline">
-						<div class="gf-form gf-form--grow">
-							<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
-						</div>
-						<div class="gf-form">
-							<button class="btn btn-inverse" clipboard-button="getShareUrl()"><i class="fa fa-clipboard"></i> Copy</button>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="gf-form" ng-show="modeSharePanel">
-				<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
-			</div>
-		</div>
+  <div class="share-modal-header">
+  	<div class="share-modal-big-icon">
+  		<i class="gicon gicon-link"></i>
+  	</div>
+  	<div class="share-modal-content">
+  		<p class="share-modal-info-text">
+  			Create a direct link to this dashboard or panel, customized with the options below.
+  		</p>
+  		<div ng-include src="'shareLinkOptions.html'"></div>
+  		<div>
+  			<div class="gf-form-group">
+  				<div class="gf-form-inline">
+  					<div class="gf-form gf-form--grow">
+  						<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl">
+  					</div>
+  					<div class="gf-form">
+  						<button class="btn btn-inverse" clipboard-button="getShareUrl()">Copy</button>
+  					</div>
+  				</div>
+  			</div>
+  		</div>
+  		<div class="gf-form" ng-show="modeSharePanel">
+  			<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
+  		</div>
+  	</div>
 </script>
 
 <script type="text/ng-template" id="shareSnapshot.html">
-	<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
-		<div class="share-modal-header">
-			<div class="share-modal-big-icon">
-				<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
-				<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
-			</div>
-      <div class="share-modal-content">
-        <div ng-if="step === 1">
-          <p class="share-modal-info-text">
-            A snapshot is an instant way to share an interactive dashboard publicly.
-            When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
-            leaving only the visible metric data and series names embedded into your dashboard.
-          </p>
-          <p class="share-modal-info-text">
-            Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
-            Share wisely.
-          </p>
-        </div>
-
-				<div class="share-modal-header" ng-if="step === 3">
-					<p class="share-modal-info-text">
-						The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
-						browser caches or CDN caches.
-					</p>
-				</div>
-
-				<div class="gf-form-group share-modal-options">
-					<div class="gf-form" ng-if="step === 1">
-						<span class="gf-form-label width-12">Snapshot name</span>
-						<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
-					</div>
-					<div class="gf-form" ng-if="step === 1">
-						<span class="gf-form-label width-12">Expire</span>
-						<div class="gf-form-select-wrapper max-width-15">
-							<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
-						</div>
-					</div>
-
-					<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
-						<div class="gf-form-row">
-							<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
-								<i class="fa fa-external-link-square"></i>
-								{{snapshotUrl}}
-							</a>
-							<br>
-							<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()"><i class="fa fa-clipboard"></i> Copy Link</button>
-						</div>
-					</div>
-				</div>
-
-				<div ng-if="step === 1">
-					<p class="share-modal-info-text">
-						You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics.
-					</p>
-				</div>
-
-				<div class="gf-form-group share-modal-options">
-					<div class="gf-form" ng-if="step === 1">
-						<span class="gf-form-label width-12">Timeout (seconds)</span>
-						<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15" >
-					</div>
-				</div>
-
-				<div ng-if="step === 1" class="gf-form-button-row">
-					<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
-						<i class="fa fa-save"></i>
-						Local Snapshot
-					</button>
-					<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
-						<i class="fa fa-cloud-upload"></i>
-						{{sharingButtonText}}
-					</button>
-					<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
-				</div>
-
-				<div class="pull-right" ng-if="step === 2" style="padding: 5px">
-					Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
-				</div>
-			</div>
-		</div>
-	</div>
-
-</div>
+  	<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
+  		<div class="share-modal-header">
+  			<div class="share-modal-big-icon">
+  				<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
+  				<i ng-if="!loading" class="gicon gicon-snapshots"></i>
+  			</div>
+        <div class="share-modal-content">
+          <div ng-if="step === 1">
+            <p class="share-modal-info-text">
+              A snapshot is an instant way to share an interactive dashboard publicly.
+              When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
+              leaving only the visible metric data and series names embedded into your dashboard.
+            </p>
+            <p class="share-modal-info-text">
+              Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
+              Share wisely.
+            </p>
+          </div>
+
+  				<div class="share-modal-header" ng-if="step === 3">
+  					<p class="share-modal-info-text">
+  						The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
+  						browser caches or CDN caches.
+  					</p>
+  				</div>
+
+  				<div class="gf-form-group share-modal-options">
+  					<div class="gf-form" ng-if="step === 1">
+  						<span class="gf-form-label width-12">Snapshot name</span>
+  						<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15">
+  					</div>
+  					<div class="gf-form" ng-if="step === 1">
+  						<span class="gf-form-label width-12">Expire</span>
+  						<div class="gf-form-select-wrapper max-width-15">
+  							<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
+  						</div>
+  					</div>
+
+  					<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
+  						<div class="gf-form-row">
+  							<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
+  								<i class="fa fa-external-link-square"></i>
+  								{{snapshotUrl}}
+  							</a>
+  							<br>
+  							<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()">Copy Link</button>
+  						</div>
+  					</div>
+  				</div>
+
+  				<div ng-if="step === 1">
+  					<p class="share-modal-info-text">
+  						You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics.
+  					</p>
+  				</div>
+
+  				<div class="gf-form-group share-modal-options">
+  					<div class="gf-form" ng-if="step === 1">
+  						<span class="gf-form-label width-12">Timeout (seconds)</span>
+  						<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15">
+  					</div>
+  				</div>
+
+  				<div ng-if="step === 1" class="gf-form-button-row">
+  					<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
+  						Local Snapshot
+  					</button>
+  					<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
+  						{{sharingButtonText}}
+  					</button>
+  					<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
+  				</div>
+
+  				<div class="pull-right" ng-if="step === 2" style="padding: 5px">
+  					Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+
+  </div>
 </script>

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -57,7 +57,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
 
   menu.push({
     text: 'View',
-    iconClassName: 'fa fa-fw fa-eye',
+    iconClassName: 'gicon gicon-viewer',
     onClick: onViewPanel,
     shortcut: 'v',
   });
@@ -65,7 +65,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
   if (dashboard.meta.canEdit) {
     menu.push({
       text: 'Edit',
-      iconClassName: 'fa fa-fw fa-edit',
+      iconClassName: 'gicon gicon-editor',
       onClick: onEditPanel,
       shortcut: 'e',
     });

public/app/features/datasources/DashboardsTable.tsx

@@ -19,7 +19,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
           return (
             <tr key={`${dashboard.dashboardId}-${index}`}>
               <td className="width-1">
-                <i className="icon-gf icon-gf-dashboard" />
+                <i className="gicon gicon-dashboard" />
               </td>
               <td>
                 {dashboard.imported ? (

public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`Render should render table 1`] = `
         className="width-1"
       >
         <i
-          className="icon-gf icon-gf-dashboard"
+          className="gicon gicon-dashboard"
         />
       </td>
       <td>
@@ -50,7 +50,7 @@ exports[`Render should render table 1`] = `
         className="width-1"
       >
         <i
-          className="icon-gf icon-gf-dashboard"
+          className="gicon gicon-dashboard"
         />
       </td>
       <td>

public/app/features/folders/partials/create_folder.html

@@ -26,7 +26,7 @@
 
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
-				<i class="fa fa-save"></i> Create
+				Create
 			</button>
 		</div>
 	</form>

public/app/features/folders/services/FolderPageLoader.ts

@@ -27,7 +27,7 @@ export class FolderPageLoader {
           },
           {
             active: activeChildId === 'manage-folder-settings',
-            icon: 'fa fa-fw fa-cog',
+            icon: 'gicon gicon-cog',
             id: 'manage-folder-settings',
             text: 'Settings',
             url: 'dashboards/settings',

public/app/features/folders/state/navModel.ts

@@ -25,7 +25,7 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
       },
       {
         active: false,
-        icon: 'fa fa-fw fa-cog',
+        icon: 'gicon gicon-cog',
         id: `folder-settings-${folder.uid}`,
         text: 'Settings',
         url: `${folder.url}/settings`,

public/app/features/manage-dashboards/partials/dashboard_import.html

@@ -147,10 +147,10 @@
 
     <div class="gf-form-button-row">
       <button type="button" class="btn btn-primary width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
-        <i class="fa fa-save"></i> Import
+        Import
       </button>
       <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
-        <i class="fa fa-save"></i> Import (Overwrite)
+        Import (Overwrite)
       </button>
       <a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>
     </div>

public/app/features/manage-dashboards/partials/snapshot_list.html

@@ -21,7 +21,7 @@
       </td>
       <td class="text-center">
         <a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
-          <i class="fa fa-eye"></i>
+          <i class="gicon gicon-viewer"></i>
           View
         </a>
       </td>

public/app/features/panel/panel_ctrl.ts

@@ -119,7 +119,7 @@ export class PanelCtrl {
     menu.push({
       text: 'View',
       click: 'ctrl.viewPanel();',
-      icon: 'fa fa-fw fa-eye',
+      icon: 'gicon gicon-viewer',
       shortcut: 'v',
     });
 
@@ -128,7 +128,7 @@ export class PanelCtrl {
         text: 'Edit',
         click: 'ctrl.editPanel();',
         role: 'Editor',
-        icon: 'fa fa-fw fa-edit',
+        icon: 'gicon gicon-editor',
         shortcut: 'e',
       });
     }

public/app/features/playlist/partials/playlist.html

@@ -24,7 +24,7 @@
 		<table class="filter-table playlist-available-list">
 			<tr ng-repeat="playlistItem in ctrl.playlistItems">
 				<td ng-if="playlistItem.type === 'dashboard_by_id'">
-					<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
+					<i class="gicon gicon-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
 				</td>
 				<td ng-if="playlistItem.type === 'dashboard_by_tag'">
 					<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
@@ -59,7 +59,7 @@
 			<table class="filter-table playlist-available-list">
 				<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
 					<td>
-						<i class="icon-gf icon-gf-dashboard"></i>
+						<i class="gicon gicon-dashboard"></i>
 						&nbsp;&nbsp;{{playlistItem.title}}
 						<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
 					</td>

public/app/features/plugins/PluginListItem.tsx

@@ -7,13 +7,22 @@ interface Props {
 
 const PluginListItem: FC<Props> = props => {
   const { plugin } = props;
+  let icon;
+
+  if (plugin.type === 'datasource') {
+    icon = 'gicon gicon-datasources';
+  } else if (plugin.type === 'panel') {
+    icon = 'icon-gf icon-gf-panel';
+  } else {
+    icon = 'icon-gf icon-gf-apps';
+  }
 
   return (
     <li className="card-item-wrapper">
       <a className="card-item" href={`plugins/${plugin.id}/edit`}>
         <div className="card-item-header">
           <div className="card-item-type">
-            <i className={`icon-gf icon-gf-${plugin.type}`} />
+            <i className={icon} />
             {plugin.type}
           </div>
           {plugin.hasUpdate && (

public/app/features/plugins/import_list/import_list.html

@@ -3,7 +3,7 @@
 		<tbody>
 			<tr ng-repeat="dash in ctrl.dashboards">
 				<td class="width-1">
-					<i class="icon-gf icon-gf-dashboard"></i>
+					<i class="gicon gicon-dashboard"></i>
 				</td>
 				<td>
 					<a href="{{dash.importedUrl}}" ng-show="dash.imported">

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -108,7 +108,7 @@ export class PluginEditCtrl {
   getPluginIcon(type) {
     switch (type) {
       case 'datasource':
-        return 'icon-gf icon-gf-datasources';
+        return 'gicon gicon-datasources';
       case 'panel':
         return 'icon-gf icon-gf-panel';
       case 'app':
@@ -116,7 +116,7 @@ export class PluginEditCtrl {
       case 'page':
         return 'icon-gf icon-gf-endpoint-tiny';
       case 'dashboard':
-        return 'icon-gf icon-gf-dashboard';
+        return 'gicon gicon-dashboard';
       default:
         return 'icon-gf icon-gf-apps';
     }

public/app/features/templating/partials/editor.html

@@ -12,9 +12,9 @@
       class="btn btn-primary"
       ng-click="setMode('new');"
       ng-if="variables.length > 0"
-      ng-hide="mode === 'edit' || mode === 'new'"
-      ><i class="fa fa-plus"></i> New</a
-    >
+			ng-hide="mode === 'edit' || mode === 'new'">
+			New
+	  </a>
   </div>
 
   <div ng-if="mode === 'list'">

public/app/features/users/InviteeRow.tsx

@@ -34,7 +34,7 @@ class InviteeRow extends PureComponent<Props> {
               style={{ position: 'absolute', right: -1000 }}
               ref={this.copyUrlRef}
             />
-            <i className="fa fa-clipboard" /> Copy Invite
+            Copy Invite
           </button>
           &nbsp;
         </td>

public/app/partials/edit_json.html

@@ -1,24 +1,24 @@
 <div ng-controller="JsonEditorCtrl">
-	<div class="tabbed-view-header">
-		<h2 class="tabbed-view-title">
-			JSON
-		</h2>
+  <div class="tabbed-view-header">
+    <h2 class="tabbed-view-title">
+      JSON
+    </h2>
 
-		<button class="tabbed-view-close-btn" ng-click="dismiss()">
-			<i class="fa fa-remove"></i>
-		</button>
-	</div>
+    <button class="tabbed-view-close-btn" ng-click="dismiss()">
+      <i class="fa fa-remove"></i>
+    </button>
+  </div>
 
-	<div class="tabbed-view-body">
-		<div class="gf-form">
-			<code-editor content="json" data-mode="json" data-max-lines=20 ></code-editor>
-		</div>
+  <div class="tabbed-view-body">
+    <div class="gf-form">
+      <code-editor content="json" data-mode="json" data-max-lines="20"></code-editor>
+    </div>
 
-		<div class="gf-form-button-row">
-			<button type="button" class="btn btn-primary" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
-			<button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
-				<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard
-			</button>
-		</div>
-	</div>
+    <div class="gf-form-button-row">
+      <button type="button" class="btn btn-primary" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
+      <button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
+        Copy to Clipboard
+      </button>
+    </div>
+  </div>
 </div>

public/app/plugins/panel/gettingstarted/module.html

@@ -9,7 +9,7 @@
 					<span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
 					<span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
 				</a>
-				<a class="btn progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
+				<a class="btn-small progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
 			</li>
 		</ul>
 	</div>

public/app/plugins/panel/gettingstarted/module.ts

@@ -27,7 +27,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.steps.push({
       title: 'Create your first data source',
       cta: 'Add data source',
-      icon: 'icon-gf icon-gf-datasources',
+      icon: 'gicon gicon-datasources',
       href: 'datasources/new?gettingstarted',
       check: () => {
         return $q.when(
@@ -41,7 +41,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.steps.push({
       title: 'Create your first dashboard',
       cta: 'New dashboard',
-      icon: 'icon-gf icon-gf-dashboard',
+      icon: 'gicon gicon-dashboard',
       href: 'dashboard/new?gettingstarted',
       check: () => {
         return this.backendSrv.search({ limit: 1 }).then(result => {
@@ -53,7 +53,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.steps.push({
       title: 'Invite your team',
       cta: 'Add Users',
-      icon: 'icon-gf icon-gf-users',
+      icon: 'gicon gicon-team',
       href: 'org/users?gettingstarted',
       check: () => {
         return this.backendSrv.get('/api/org/users').then(res => {
@@ -65,7 +65,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.steps.push({
       title: 'Install apps & plugins',
       cta: 'Explore plugin repository',
-      icon: 'icon-gf icon-gf-apps',
+      icon: 'gicon gicon-plugins',
       href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
       check: () => {
         return this.backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then(plugins => {

public/sass/_variables.dark.generated.scss

@@ -191,6 +191,8 @@ $btn-divider-right: $dark-3;
 
 $btn-drag-image: '../img/grab_dark.svg';
 
+$navbar-btn-gicon-brightness: brightness(0.5);
+
 // Forms
 // -------------------------
 $input-bg: $input-black;

public/sass/_variables.light.generated.scss

@@ -178,6 +178,8 @@ $btn-divider-right: $gray-7;
 
 $btn-drag-image: '../img/grab_light.svg';
 
+$navbar-btn-gicon-brightness: brightness(1.5);
+
 // Forms
 // -------------------------
 $input-bg: $white;

public/sass/base/_grafana_icons.scss

@@ -30,11 +30,9 @@
   width: 1.2857142857em;
   text-align: center;
 }
-
 .inline-icon-gf {
   vertical-align: middle;
 }
-
 .icon-gf-raintank_wordmark:before {
   content: '\e600';
 }
@@ -59,46 +57,12 @@
 .icon-gf-panel:before {
   content: '\e904';
 }
-.icon-gf-datasources:before {
-  content: '\e607';
-}
 .icon-gf-endpoint-tiny:before {
   content: '\e608';
 }
-.icon-gf-endpoint:before {
-  content: '\e609';
-}
-.icon-gf-page:before {
-  content: '\e908';
-}
-.icon-gf-filter:before {
-  content: '\e60a';
-}
-.icon-gf-status:before {
-  content: '\e60b';
-}
-.icon-gf-monitoring:before {
-  content: '\e60c';
-}
-.icon-gf-monitoring-tiny:before {
-  content: '\e620';
-}
-.icon-gf-jump-to-dashboard:before {
-  content: '\e60d';
-}
-.icon-gf-warn,
-.icon-gf-warning:before {
-  content: '\e60e';
-}
-.icon-gf-nodata:before {
-  content: '\e60f';
-}
 .icon-gf-critical:before {
   content: '\e610';
 }
-.icon-gf-crit:before {
-  content: '\e610';
-}
 .icon-gf-online:before {
   content: '\e611';
 }
@@ -183,18 +147,3 @@
 .icon-gf-apps:before {
   content: '\e902';
 }
-.icon-gf-scale:before {
-  content: '\e906';
-}
-.icon-gf-pending:before {
-  content: '\e909';
-}
-.icon-gf-verified:before {
-  content: '\e90a';
-}
-.icon-gf-worldping:before {
-  content: '\e627';
-}
-.icon-gf-grafana_wordmark:before {
-  content: '\e903';
-}

public/sass/base/_icons.scss

@@ -28,6 +28,7 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg');
 }
 
+// not used
 .gicon-add-annotation-alt {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg');
 }
@@ -36,6 +37,7 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg');
 }
 
+// not used
 .gicon-add-user {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg');
 }
@@ -64,6 +66,7 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
 }
 
+//not used
 .gicon-alert-alt {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg');
 }
@@ -80,6 +83,7 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg');
 }
 
+//not used
 .gicon-annotation-alt {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg');
 }
@@ -100,6 +104,7 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg');
 }
 
+//not used
 .gicon-dashboard-starred {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg');
 }
@@ -188,6 +193,7 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_viewer.svg');
 }
 
+//not used
 .gicon-zoom-out {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
 }
@@ -217,6 +223,7 @@
   }
 }
 
+// not used
 .fa--permissions-list {
   min-width: 20px;
   padding-right: 5px;

public/sass/components/_modals.scss

@@ -144,10 +144,13 @@
   .share-modal-big-icon {
     margin-bottom: 10px;
     margin-right: $space-xl;
-    .fa,
-    .icon-gf {
+    .fa {
       font-size: 50px;
     }
+    .gicon {
+      width: 48px;
+      height: 48px;
+    }
   }
 
   .share-modal-info-text {

public/sass/components/_navbar.scss

@@ -146,6 +146,17 @@
     border-radius: 0 2px 2px 0;
   }
 
+  &--settings {
+    .gicon {
+      filter: $navbar-btn-gicon-brightness;
+    }
+    &:hover {
+      .gicon {
+        filter: brightness(0.8);
+      }
+    }
+  }
+
   &--tight {
     padding: 7px 4px;
 

public/sass/components/_panel_gettingstarted.scss

@@ -79,7 +79,7 @@ $path-position: $marker-size-half - ($path-height / 2);
   // Active state
   &.active {
     .progress-step-cta {
-      display: inline-block;
+      display: inline-flex;
     }
     .progress-title {
       font-weight: 400;
@@ -95,6 +95,9 @@ $path-position: $marker-size-half - ($path-height / 2);
         -webkit-background-clip: text;
         text-decoration: none;
       }
+      .gicon {
+        opacity: 1;
+      }
     }
   }
 
@@ -154,6 +157,9 @@ $path-position: $marker-size-half - ($path-height / 2);
   text-decoration: none;
   font-size: 35px;
   vertical-align: sub;
+  .gicon {
+    opacity: 0.7;
+  }
 }
 
 a.progress-link {