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/explore/components/controls/AnnotationLayerControl/index.tsx

@@ -27,6 +27,7 @@ import {
   SupersetTheme,
   t,
   withTheme,
+  css,
 } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
@@ -36,6 +37,7 @@ import CustomListItem from 'src/explore/components/controls/CustomListItem';
 import { ChartState, ExplorePageState } from 'src/explore/types';
 import { AnyAction } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import Icons from 'src/components/Icons';
 import ControlPopover, {
   getSectionContainerElement,
 } from '../ControlPopover/ControlPopover';
@@ -187,12 +189,9 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
     const { annotationError, annotationQuery, theme } = this.props;
     if (annotationQuery[anno.name]) {
       return (
-        // TODO: Remove fa-icon
-        // eslint-disable-next-line icons/no-fa-icons-usage
-        <i
-          className="fa fa-refresh"
-          style={{ color: theme.colors.primary.base }}
-          aria-hidden
+        <Icons.SyncOutlined
+          iconColor={theme.colors.primary.base}
+          iconSize="m"
         />
       );
     }
@@ -213,6 +212,7 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
 
   render() {
     const { addedAnnotationIndex } = this.state;
+    const { theme } = this.props;
     const addedAnnotation =
       addedAnnotationIndex !== null
         ? this.props.value[addedAnnotationIndex]
@@ -263,13 +263,15 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
             }
           >
             <CustomListItem selectable>
-              {/* TODO: Remove fa-icon */}
-              {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-              <i
+              <Icons.PlusOutlined
+                iconSize="m"
+                css={css`
+                  margin: auto ${theme.gridUnit}px auto 0;
+                  vertical-align: tex-top;
+                `}
                 data-test="add-annotation-layer-button"
-                className="fa fa-plus"
-              />{' '}
-              &nbsp; {t('Add annotation layer')}
+              />
+              {t('Add annotation layer')}
             </CustomListItem>
           </ControlPopover>
         </List>