refactor: icon to icons for sqllab (#15593)

* initial commit

* rid of theme

* Update superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

* Update superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx

@@ -21,7 +21,7 @@ import { t, styled, supersetTheme } from '@superset-ui/core';
 
 import { Menu } from 'src/common/components';
 import Button, { ButtonProps } from 'src/components/Button';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import {
   DropdownButton,
   DropdownButtonProps,
@@ -77,6 +77,10 @@ const StyledButton = styled.span`
     &:last-of-type {
       margin-right: ${({ theme }) => theme.gridUnit * 2}px;
     }
+    span[name='caret-down'] {
+      display: flex;
+      margin-right: ${({ theme }) => theme.gridUnit * -2}px;
+    }
   }
 `;
 
@@ -116,8 +120,8 @@ const RunQueryActionButton = ({
           ? {
               overlay: overlayCreateAsMenu,
               icon: (
-                <Icon
+                <Icons.CaretDown
-                  color={
+                  iconColor={
                     isDisabled
                       ? supersetTheme.colors.grayscale.base
                       : supersetTheme.colors.grayscale.light5

superset-frontend/src/SqlLab/components/SaveQuery.tsx

@@ -18,15 +18,21 @@
  */
 import React, { useState } from 'react';
 import { Row, Col, Input, TextArea } from 'src/common/components';
-import { t, supersetTheme, styled } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import { Form, FormItem } from 'src/components/Form';
 import Modal from 'src/components/Modal';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 
 const Styles = styled.span`
-  svg {
+  span[role='img'] {
-    vertical-align: -${supersetTheme.gridUnit * 1.25}px;
+    display: flex;
+    margin: 0;
+    color: ${({ theme }) => theme.colors.grayscale.base};
+    svg {
+      vertical-align: -${({ theme }) => theme.gridUnit * 1.25}px;
+      margin: 0;
+    }
   }
 `;
 
@@ -150,12 +156,7 @@ export default function SaveQuery({
   return (
     <Styles className="SaveQuery">
       <Button buttonSize="small" onClick={toggleSave}>
-        <Icon
+        <Icons.Save iconSize="xl" />
-          name="save"
-          color={supersetTheme.colors.primary.base}
-          width={20}
-          height={20}
-        />{' '}
         {isSaved ? t('Save') : t('Save as')}
       </Button>
       <Modal

superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

@@ -17,11 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import { t, useTheme } from '@superset-ui/core';
+import { t, useTheme, styled } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { storeQuery } from 'src/utils/common';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
@@ -39,6 +39,16 @@ interface ShareSqlLabQueryPropTypes {
   addDangerToast: (msg: string) => void;
 }
 
+const StyledIcon = styled(Icons.Link)`
+  &:first-of-type {
+    margin: 0;
+    display: flex;
+    svg {
+      margin: 0;
+    }
+  }
+`;
+
 function ShareSqlLabQuery({
   queryEditor,
   addDangerToast,
@@ -86,14 +96,12 @@ function ShareSqlLabQuery({
       : t('Save the query to enable this feature');
     return (
       <Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
-        <Icon
+        <StyledIcon
-          name="link"
+          iconColor={
-          color={
             canShare ? theme.colors.primary.base : theme.colors.grayscale.base
           }
-          width={20}
+          iconSize="xl"
-          height={20}
+        />
-        />{' '}
         {t('Copy link')}
       </Button>
     );