@grafana/ui: Various smaller Icon updates (#23588)

* Remove icon types duplicates, update getAllIcons * Update Explore-related icons, positioning * Update Getting started icons * Update navmodel * Style adjustments, css changes * Update tests * Updatee icon name in test file
2025-02-25 18:55:37 -06:00 · 2020-04-16 13:49:58 +02:00
parent 2de79a4d8c
commit 6937f3549b
39 changed files with 102 additions and 92 deletions
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
@@ -4,12 +4,12 @@ import { shallow } from 'enzyme';

 describe('QueryOperationAction', () => {
  it('renders', () => {
-    expect(() => shallow(<QueryOperationAction icon="add-panel" onClick={() => {}} />)).not.toThrow();
+    expect(() => shallow(<QueryOperationAction icon="panel-add" onClick={() => {}} />)).not.toThrow();
  });
  describe('when disabled', () => {
    it('does not call onClick handler', () => {
      const clickSpy = jest.fn();
-      const wrapper = shallow(<QueryOperationAction icon="add-panel" onClick={clickSpy} title="Test action" />);
+      const wrapper = shallow(<QueryOperationAction icon="panel-add" onClick={clickSpy} title="Test action" />);
      const actionEl = wrapper.find({ 'aria-label': 'Test action query operation action' });

      expect(actionEl).toHaveLength(1);
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -182,7 +182,7 @@ export class PanelHeader extends Component<Props, State> {
              )}
              {data.request && data.request.timeInfo && (
                <span className="panel-time-info">
-                  <Icon name="clock-nine" /> {data.request.timeInfo}
+                  <Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
                </span>
              )}
            </div>
--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
@@ -15,7 +15,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
    children: [
      {
        active: false,
-        icon: 'fa fa-fw fa-sliders',
+        icon: 'sliders-v-alt',
        id: `datasource-settings-${dataSource.id}`,
        text: 'Settings',
        url: `datasources/edit/${dataSource.id}/`,
@@ -38,7 +38,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
  if (pluginMeta.includes && hasDashboards(pluginMeta.includes)) {
    navModel.children.push({
      active: false,
-      icon: 'fa fa-fw fa-th-large',
+      icon: 'apps',
      id: `datasource-dashboards-${dataSource.id}`,
      text: 'Dashboards',
      url: `datasources/edit/${dataSource.id}/dashboards`,
@@ -48,7 +48,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
  if (config.licenseInfo.hasLicense) {
    navModel.children.push({
      active: false,
-      icon: 'fa fa-fw fa-lock',
+      icon: 'lock',
      id: `datasource-permissions-${dataSource.id}`,
      text: 'Permissions',
      url: `datasources/edit/${dataSource.id}/permissions`,
--- a/public/app/features/explore/LiveLogs.tsx
+++ b/public/app/features/explore/LiveLogs.tsx
@@ -184,7 +184,7 @@ class LiveLogs extends PureComponent<Props, State> {
            {isPaused ? 'Resume' : 'Pause'}
          </button>
          <button onClick={this.props.stopLive} className={cx('btn btn-inverse', styles.button)}>
-            <Icon name="square-shape" />
+            <Icon name="square-shape" size="lg" type="mono" />
            &nbsp; Exit live mode
          </button>
          {isPaused || (
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -137,7 +137,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
      <CSSTransition
        mountOnEnter={true}
        unmountOnExit={true}
-        timeout={500}
+        timeout={100}
        in={isLive}
        classNames={{
          enter: styles.stopButtonEnter,
@@ -151,7 +151,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
            className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
            onClick={stop}
          >
-            <Icon className="icon-brand-gradient" name="square-shape" />
+            <Icon className="icon-brand-gradient" name="square-shape" size="lg" type="mono" />
          </button>
        </div>
      </CSSTransition>
--- a/public/app/features/explore/QueryRowActions.tsx
+++ b/public/app/features/explore/QueryRowActions.tsx
@@ -51,7 +51,7 @@ export function QueryRowActions(props: Props) {
          onClick={onClickToggleDisabled}
          title={isDisabled ? 'Enable query' : 'Disable query'}
        >
-          <Icon name={isDisabled ? 'eye' : 'eye-slash'} />
+          <Icon name={isDisabled ? 'eye-slash' : 'eye'} />
        </button>
      </div>
      <div className="gf-form">
--- a/public/app/features/explore/ResponsiveButton.tsx
+++ b/public/app/features/explore/ResponsiveButton.tsx
@@ -46,9 +46,9 @@ export const ResponsiveButton = forwardRef<HTMLDivElement, Props>((props, ref) =
        onClick={onClick}
        disabled={disabled || false}
      >
-        {icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} /> : null}
+        {icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} size="lg" /> : null}
        <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
-        {icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} /> : null}
+        {icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} size="lg" /> : null}
      </button>
    </div>
  );
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -47,7 +47,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
        aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
        onClick={() => onClick()}
      >
-        <Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} />
+        <Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} size="lg" />
      </button>
    </Tooltip>
  );
--- a/public/app/features/explore/snapshots/QueryRowActions.test.tsx.snap
+++ b/public/app/features/explore/snapshots/QueryRowActions.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`QueryRowActions should render component 1`] = `
      title="Disable query"
    >
      <Icon
-        name="eye-slash"
+        name="eye"
      />
    </button>
  </div>
--- a/public/app/features/explore/snapshots/TimeSyncButton.test.tsx.snap
+++ b/public/app/features/explore/snapshots/TimeSyncButton.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`TimeSyncButton should render component 1`] = `
        <Icon
          className="css-1c3xqzq-topPadding icon-brand-gradient"
          name="link"
+          size="lg"
        >
          <div
            className="css-1cvxpvr"
@@ -30,14 +31,14 @@ exports[`TimeSyncButton should render component 1`] = `
            <UilLink
              className="icon-brand-gradient css-1q2xpj8-topPadding"
              color="currentColor"
-              size={16}
+              size={18}
            >
              <svg
                className="icon-brand-gradient css-1q2xpj8-topPadding"
                fill="currentColor"
-                height={16}
+                height={18}
                viewBox="0 0 24 24"
-                width={16}
+                width={18}
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
--- a/public/app/features/manage-dashboards/partials/snapshot_list.html
+++ b/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">
-          <icon name="'eye'" style="margin-right: 4px"></icon>
+          <icon name="'eye'" style="margin-right: 4px;"></icon>
          View
        </a>
      </td>
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@@ -73,7 +73,7 @@
          </td>
          <td class="add-dashboard">
            <button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
-              <icon name="'plus'"></i>
+              <icon name="'plus'"></icon>
              Add to playlist
            </button>
          </td>
@@ -91,7 +91,7 @@
          </td>
          <td class="add-dashboard">
            <button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
-              <icon name="'plus'"></i>
+              <icon name="'plus'"></icon>
              Add to playlist
            </button>
          </td>
--- a/public/app/features/profile/partials/profile.html
+++ b/public/app/features/profile/partials/profile.html
@@ -24,7 +24,7 @@
          <td>{{ session.browser }} on {{ session.os }} {{ session.osVersion }}</td>
          <td>
            <button class="btn btn-danger btn-small" ng-click="ctrl.revokeUserSession(session.id)">
-              <icon name="'power'" style="margin-top: -2px;"></icon>
+              <icon name="'power'"></icon>
            </button>
          </td>
        </tr>
--- a/public/app/features/teams/mocks/navModelMock.ts
+++ b/public/app/features/teams/mocks/navModelMock.ts
@@ -2,7 +2,7 @@ export const getMockNavModel = (pageName: string) => {
  return {
    node: {
      active: false,
-      icon: 'gicon gicon-team',
+      icon: 'users-alt',
      id: `team-${pageName}-2`,
      text: `${pageName}`,
      url: 'org/teams/edit/2/members',
@@ -16,14 +16,14 @@ export const getMockNavModel = (pageName: string) => {
        children: [
          {
            active: false,
-            icon: 'gicon gicon-team',
+            icon: 'users-alt',
            id: 'team-members-2',
            text: 'Members',
            url: 'org/teams/edit/2/members',
          },
          {
            active: false,
-            icon: 'fa fa-fw fa-sliders',
+            icon: 'sliders-v-alt',
            id: 'team-settings-2',
            text: 'Settings',
            url: 'org/teams/edit/2/settings',
@@ -41,14 +41,14 @@ export const getMockNavModel = (pageName: string) => {
      children: [
        {
          active: true,
-          icon: 'gicon gicon-team',
+          icon: 'users-alt',
          id: 'team-members-2',
          text: 'Members',
          url: 'org/teams/edit/2/members',
        },
        {
          active: false,
-          icon: 'fa fa-fw fa-sliders',
+          icon: 'sliders-v-alt',
          id: 'team-settings-2',
          text: 'Settings',
          url: 'org/teams/edit/2/settings',
--- a/public/app/features/teams/state/navModel.ts
+++ b/public/app/features/teams/state/navModel.ts
@@ -13,14 +13,14 @@ export function buildNavModel(team: Team): NavModelItem {
    children: [
      {
        active: false,
-        icon: 'gicon gicon-team',
+        icon: 'users-alt',
        id: `team-members-${team.id}`,
        text: 'Members',
        url: `org/teams/edit/${team.id}/members`,
      },
      {
        active: false,
-        icon: 'fa fa-fw fa-sliders',
+        icon: 'sliders-v-alt',
        id: `team-settings-${team.id}`,
        text: 'Settings',
        url: `org/teams/edit/${team.id}/settings`,
@@ -31,7 +31,7 @@ export function buildNavModel(team: Team): NavModelItem {
  if (config.licenseInfo.hasLicense) {
    navModel.children.push({
      active: false,
-      icon: 'fa fa-fw fa-refresh',
+      icon: 'sync',
      id: `team-groupsync-${team.id}`,
      text: 'External group sync',
      url: `org/teams/edit/${team.id}/groupsync`,
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
@@ -61,8 +61,8 @@
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
    </div>
  </div>
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
@@ -244,8 +244,8 @@
      <div class="gf-form">
        <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
          Show Help
-          <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-          <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+          <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+          <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
        </label>
      </div>
      <div class="gf-form" ng-show="ctrl.lastQuery">
--- a/public/app/plugins/datasource/mssql/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/mssql/partials/annotations.editor.html
@@ -19,8 +19,8 @@
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
    </div>
  </div>
--- a/public/app/plugins/datasource/mssql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mssql/partials/query.editor.html
@@ -16,15 +16,15 @@
 		<div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
 		</div>
 		<div class="gf-form" ng-show="ctrl.lastQueryMeta">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
        Generated SQL
-        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
      </label>
 		</div>
 		<div class="gf-form gf-form--grow">
--- a/public/app/plugins/datasource/mysql/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/annotations.editor.html
@@ -19,8 +19,8 @@
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
    </div>
  </div>
--- a/public/app/plugins/datasource/mysql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -116,15 +116,15 @@
    <div class="gf-form">
      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
    </div>
    <div class="gf-form" ng-show="ctrl.lastQueryMeta">
      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
        Generated SQL
-        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
      </label>
    </div>
    <div class="gf-form gf-form--grow">
--- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -213,7 +213,7 @@
 			</label>
 			<label class="gf-form-label" >
 				<a ng-click="ctrl.addTag()" ng-hide="ctrl.errors.tags">add tag</a>
-				<a ng-click="ctrl.closeAddTagMode()"><icon name="'times'"></icon></a>
+				<a ng-click="ctrl.closeAddTagMode()"><icon name="'times'" size="'sm'"></icon></a>
 			</label>
 		</div>

--- a/public/app/plugins/datasource/postgres/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
@@ -19,8 +19,8 @@
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
    </div>
  </div>
--- a/public/app/plugins/datasource/postgres/partials/query.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/query.editor.html
@@ -116,15 +116,15 @@
    <div class="gf-form">
      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
-        <icon name="'angle-caret-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-caret-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
      </label>
    </div>
    <div class="gf-form" ng-show="ctrl.lastQueryMeta">
      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
        Generated SQL
-        <icon name="'angle-caret-down'" ng-show="ctrl.showLastQuerySQL"></icon>
-        <icon name="'angle-caret-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
      </label>
    </div>
    <div class="gf-form gf-form--grow">
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -47,7 +47,12 @@ export class Help extends React.Component<Props, State> {
          {rawQuery && (
            <div className="gf-form" onClick={this.onRawQueryClicked}>
              <label className="gf-form-label query-keyword">
-                Raw Query <Icon name={displaRawQuery ? 'angle-down' : 'angle-right'} ng-show="ctrl.showHelp" />
+                Raw query
+                <Icon
+                  name={displaRawQuery ? 'angle-down' : 'angle-right'}
+                  ng-show="ctrl.showHelp"
+                  style={{ marginTop: '3px' }}
+                />
              </label>
            </div>
          )}
--- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
+++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';

 import { PanelProps } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Icon, IconName } from '@grafana/ui';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { contextSrv } from 'app/core/core';
@@ -11,7 +11,7 @@ import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 interface Step {
  title: string;
  cta?: string;
-  icon: string;
+  icon: IconName;
  href: string;
  target?: string;
  note?: string;
@@ -37,7 +37,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
    this.steps = [
      {
        title: 'Install Grafana',
-        icon: 'icon-gf icon-gf-check',
+        icon: 'check',
        href: 'http://docs.grafana.org/',
        target: '_blank',
        note: 'Review the installation docs',
@@ -46,7 +46,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
      {
        title: 'Create a data source',
        cta: 'Add data source',
-        icon: 'gicon gicon-datasources',
+        icon: 'database',
        href: 'datasources/new?gettingstarted',
        check: () => {
          return new Promise(resolve => {
@@ -63,7 +63,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
      {
        title: 'Build a dashboard',
        cta: 'New dashboard',
-        icon: 'gicon gicon-dashboard',
+        icon: 'apps',
        href: 'dashboard/new?gettingstarted',
        check: () => {
          return backendSrv.search({ limit: 1 }).then(result => {
@@ -74,7 +74,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
      {
        title: 'Invite your team',
        cta: 'Add Users',
-        icon: 'gicon gicon-team',
+        icon: 'users-alt',
        href: 'org/users?gettingstarted',
        check: () => {
          return backendSrv.get('/api/org/users/lookup').then((res: any) => {
@@ -86,7 +86,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
      {
        title: 'Install apps & plugins',
        cta: 'Explore plugin repository',
-        icon: 'gicon gicon-plugins',
+        icon: 'plug',
        href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
        check: () => {
          return backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then((plugins: any[]) => {
@@ -153,7 +153,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
              <div key={index} className={step.done ? 'progress-step completed' : 'progress-step active'}>
                <a className="progress-link" href={step.href} target={step.target} title={step.note}>
                  <span className="progress-marker">
-                    <i className={step.icon} />
+                    <Icon name={step.icon} size="xxl" />
                  </span>
                  <span className="progress-text">{step.title}</span>
                </a>