@grafana/ui: Replace various icons using Icon component (#23442)

* Replace icons in dashboard and settings

* Replace icons in alerting

* Update batch of icons

* Implement icons accross various files

* Style updates

* Search: Fix recent and starred icons

* Update styling and details

* Replace new icon created by unicons

* Fix e2e test, styling

* Minor styling updates

Co-authored-by: Clarity-89 <homes89@ukr.net>

public/app/features/datasources/DashboardsTable.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { PluginDashboard } from '../../types';
+import { Icon } from '@grafana/ui';
 
 export interface Props {
   dashboards: PluginDashboard[];
@@ -19,7 +20,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
           return (
             <tr key={`${dashboard.dashboardId}-${index}`}>
               <td className="width-1">
-                <i className="gicon gicon-dashboard" />
+                <Icon name="apps" />
               </td>
               <td>
                 {dashboard.imported ? (
@@ -40,7 +41,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
                 )}
                 {dashboard.imported && (
                   <button className="btn btn-danger btn-small" onClick={() => onRemove(dashboard)}>
-                    <i className="fa fa-trash" />
+                    <Icon name="trash-alt" />
                   </button>
                 )}
               </td>

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

@@ -19,8 +19,8 @@ exports[`Render should render table 1`] = `
       <td
         className="width-1"
       >
-        <i
-          className="gicon gicon-dashboard"
+        <Icon
+          name="apps"
         />
       </td>
       <td>
@@ -49,8 +49,8 @@ exports[`Render should render table 1`] = `
       <td
         className="width-1"
       >
-        <i
-          className="gicon gicon-dashboard"
+        <Icon
+          name="apps"
         />
       </td>
       <td>
@@ -77,8 +77,8 @@ exports[`Render should render table 1`] = `
           className="btn btn-danger btn-small"
           onClick={[Function]}
         >
-          <i
-            className="fa fa-trash"
+          <Icon
+            name="trash-alt"
           />
         </button>
       </td>

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -24,6 +24,7 @@ import { getRouteParamsId } from 'app/core/selectors/location';
 // Types
 import { CoreEvents, StoreState } from 'app/types/';
 import { UrlQueryMap } from '@grafana/runtime';
+import { Icon } from '@grafana/ui';
 import { DataSourcePluginMeta, DataSourceSettings, NavModel } from '@grafana/data';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
@@ -78,7 +79,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
       title: 'Delete',
       text: 'Are you sure you want to delete this data source?',
       yesText: 'Delete',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       onConfirm: () => {
         this.confirmDelete();
       },
@@ -129,7 +130,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
     const node = {
       text: msg,
       subTitle: 'Data Source Error',
-      icon: 'fa fa-fw fa-warning',
+      icon: 'exclamation-triangle',
     };
     const nav = {
       node: node,
@@ -206,11 +207,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
           {testingStatus && testingStatus.message && (
             <div className={`alert-${testingStatus.status} alert`} aria-label={e2e.pages.DataSource.selectors.alert}>
               <div className="alert-icon">
-                {testingStatus.status === 'error' ? (
-                  <i className="fa fa-exclamation-triangle" />
-                ) : (
-                  <i className="fa fa-check" />
-                )}
+                {testingStatus.status === 'error' ? <Icon name="exclamation-triangle" /> : <Icon name="check" />}
               </div>
               <div className="alert-body">
                 <div className="alert-title" aria-label={e2e.pages.DataSource.selectors.alertMessage}>