@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/teams/TeamGroupSync.tsx

@@ -66,7 +66,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
         <td>{group.groupId}</td>
         <td style={{ width: '1%' }}>
           <a className="btn btn-danger btn-small" onClick={() => this.onRemoveGroup(group)}>
-            <Icon name="times" />
+            <Icon name="times" style={{ marginBottom: 0 }} />
           </a>
         </td>
       </tr>
@@ -87,7 +87,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
             <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
-              <i className="fa fa-plus" /> Add group
+              <Icon name="plus-circle" /> Add group
             </button>
           )}
         </div>

public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap

@@ -108,8 +108,8 @@ exports[`Render should render groups table 1`] = `
       className="btn btn-primary pull-right"
       onClick={[Function]}
     >
-      <i
-        className="fa fa-plus"
+      <Icon
+        name="plus-circle"
       />
        Add group
     </button>
@@ -200,6 +200,11 @@ exports[`Render should render groups table 1`] = `
             >
               <Icon
                 name="times"
+                style={
+                  Object {
+                    "marginBottom": 0,
+                  }
+                }
               />
             </a>
           </td>
@@ -223,6 +228,11 @@ exports[`Render should render groups table 1`] = `
             >
               <Icon
                 name="times"
+                style={
+                  Object {
+                    "marginBottom": 0,
+                  }
+                }
               />
             </a>
           </td>
@@ -246,6 +256,11 @@ exports[`Render should render groups table 1`] = `
             >
               <Icon
                 name="times"
+                style={
+                  Object {
+                    "marginBottom": 0,
+                  }
+                }
               />
             </a>
           </td>