refactor: icon to icons for controls (#15568)

* initial commit

* Update DateFilterLabel.tsx

superset-frontend/src/explore/components/controls/CollectionControl/index.jsx

@@ -27,7 +27,7 @@ import {
   SortableElement,
   arrayMove,
 } from 'react-sortable-hoc';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import {
   HeaderContainer,
   AddIconButton,
@@ -156,11 +156,9 @@ class CollectionControl extends React.Component {
         <HeaderContainer>
           <ControlHeader {...this.props} />
           <AddIconButton onClick={this.onAdd}>
-            <Icon
-              name="plus-large"
-              width={theme.gridUnit * 3}
-              height={theme.gridUnit * 3}
-              color={theme.colors.grayscale.light5}
+            <Icons.PlusLarge
+              iconSize="s"
+              iconColor={theme.colors.grayscale.light5}
             />
           </AddIconButton>
         </HeaderContainer>

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

@@ -22,7 +22,6 @@ import { t, styled, supersetTheme } from '@superset-ui/core';
 
 import { Dropdown, Menu } from 'src/common/components';
 import { Tooltip } from 'src/components/Tooltip';
-import Icon from 'src/components/Icon';
 import Icons from 'src/components/Icons';
 import ChangeDatasourceModal from 'src/datasource/ChangeDatasourceModal';
 import DatasourceModal from 'src/datasource/DatasourceModal';
@@ -93,6 +92,12 @@ const Styles = styled.div`
     margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
     flex: none;
   }
+  span[aria-label='dataset-physical'] {
+    color: ${({ theme }) => theme.colors.grayscale.base};
+  }
+  span[aria-label='more-horiz'] {
+    color: ${({ theme }) => theme.colors.primary.base};
+  }
 `;
 
 const CHANGE_DATASET = 'change_dataset';
@@ -190,7 +195,7 @@ class DatasourceControl extends React.PureComponent {
     return (
       <Styles data-test="datasource-control" className="DatasourceControl">
         <div className="data-container">
-          <Icon name="dataset-physical" className="dataset-svg" />
+          <Icons.DatasetPhysical className="dataset-svg" />
           {/* Add a tooltip only for long dataset names */}
           {!isMissingDatasource && datasource.name.length > 25 ? (
             <Tooltip title={datasource.name}>
@@ -218,10 +223,9 @@ class DatasourceControl extends React.PureComponent {
             data-test="datasource-menu"
           >
             <Tooltip title={t('More dataset related options')}>
-              <Icon
+              <Icons.MoreHoriz
                 className="datasource-modal-trigger"
                 data-test="datasource-menu-trigger"
-                name="more-horiz"
               />
             </Tooltip>
           </Dropdown>

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -21,9 +21,9 @@ import rison from 'rison';
 import {
   SupersetClient,
   styled,
-  supersetTheme,
   t,
   TimeRangeEndpoints,
+  useTheme,
 } from '@superset-ui/core';
 import {
   buildTimeRangeString,
@@ -39,7 +39,7 @@ import ControlHeader from 'src/explore/components/ControlHeader';
 import Label from 'src/components/Label';
 import Popover from 'src/components/Popover';
 import { Divider } from 'src/common/components';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { Select } from 'src/components/Select';
 import { Tooltip } from 'src/components/Tooltip';
 import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
@@ -156,7 +156,7 @@ const ContentStyleWrapper = styled.div`
 `;
 
 const IconWrapper = styled.span`
-  svg {
+  span {
     margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
     vertical-align: middle;
   }
@@ -281,6 +281,8 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
     setFrame(option.value as FrameType);
   }
 
+  const theme = useTheme();
+
   const overlayConetent = (
     <ContentStyleWrapper>
       <div className="control-label">{t('RANGE TYPE')}</div>
@@ -310,10 +312,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
         {validTimeRange && <div>{evalResponse}</div>}
         {!validTimeRange && (
           <IconWrapper className="warning">
-            <Icon
-              name="error-solid-small"
-              color={supersetTheme.colors.error.base}
-            />
+            <Icons.ErrorSolidSmall iconColor={theme.colors.error.base} />
             <span className="text error">{evalResponse}</span>
           </IconWrapper>
         )}
@@ -345,7 +344,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
 
   const title = (
     <IconWrapper>
-      <Icon name="edit-alt" />
+      <Icons.EditAlt iconColor={theme.colors.grayscale.base} />
       <span className="text">{t('Edit time range')}</span>
     </IconWrapper>
   );