refactor(Icons): Replaces custom icons with Ant Design 5 icons (#32112)

Replace custom icons with Ant Design 5 icons to standardize the icon

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

@@ -40,7 +40,7 @@ import ModalTrigger from 'src/components/ModalTrigger';
 import { UserWithPermissionsAndRoles as User } from 'src/types/bootstrapTypes';
 import ResultSet from '../ResultSet';
 import HighlightedSql from '../HighlightedSql';
-import { StaticPosition, verticalAlign, StyledTooltip } from './styles';
+import { StaticPosition, StyledTooltip } from './styles';
 
 interface QueryTableQuery
   extends Omit<
@@ -188,7 +188,10 @@ const QueryTable = ({
       timed_out: {
         config: {
           icon: (
-            <Icons.Clock iconColor={theme.colors.error.base} iconSize="m" />
+            <Icons.ClockCircleOutlined
+              iconColor={theme.colors.error.base}
+              iconSize="m"
+            />
           ),
           label: t('Offline'),
         },
@@ -277,9 +280,7 @@ const QueryTable = ({
             buttonStyle="link"
             onClick={() => openQuery(q.queryId)}
           >
-            {/* TODO: Remove fa-icon */}
-            {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-            <i className="fa fa-external-link m-r-3" />
+            <Icons.Full iconSize="m" iconColor={theme.colors.primary.dark1} />
             {t('Edit')}
           </Button>
         );
@@ -344,7 +345,7 @@ const QueryTable = ({
               placement="top"
               className="pointer"
             >
-              <Icons.Edit iconSize="xl" />
+              <Icons.EditOutlined iconSize="l" />
             </StyledTooltip>
             <StyledTooltip
               onClick={() => openQueryInNewTab(query)}
@@ -352,7 +353,7 @@ const QueryTable = ({
               placement="top"
               className="pointer"
             >
-              <Icons.PlusCircleOutlined iconSize="xl" css={verticalAlign} />
+              <Icons.PlusCircleOutlined iconSize="l" />
             </StyledTooltip>
             {q.id !== latestQueryId && (
               <StyledTooltip
@@ -360,7 +361,7 @@ const QueryTable = ({
                 onClick={() => dispatch(removeQuery(query))}
                 className="pointer"
               >
-                <Icons.Trash iconSize="xl" />
+                <Icons.DeleteOutlined iconSize="l" />
               </StyledTooltip>
             )}
           </div>