refactor: New Icon system with Enhanced Antd Custom Icon (#12229)

* Enhance custom icon

* Minor fix

* Move DashboardList icon trash icon to enhanced

* Enhance trash icon on lists

* Enhance actions icons card view

* Add storybook entry for custom icons

* Test delete button

* Remove commented line

* Fix linting issue

* Enhance Antd icons

* Enhance existing icons up to BoltSmallRunIcon

* Remove unused import

* Import/Exports all icons from index

* Export all existing icons

* Implement more enhanced icons

* Add data-id on edit buttons

* Fix lint issue

* Inherit color

* Apply original color to actions

* Fix linting issue

* Fix typo

* Change ModeHoriz to MoreHoriz

superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx

@@ -26,7 +26,7 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu';
 import DeleteModal from 'src/components/DeleteModal';
 import { Tooltip } from 'src/common/components/Tooltip';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import ListView, { Filters } from 'src/components/ListView';
 import { commonMenuData } from 'src/views/CRUD/data/common';
 import ImportModelsModal from 'src/components/ImportModal/index';
@@ -55,12 +55,20 @@ interface DatabaseListProps {
   addSuccessToast: (msg: string) => void;
 }
 
-const IconBlack = styled(Icon)`
+const IconCheck = styled(Icons.Check)`
   color: ${({ theme }) => theme.colors.grayscale.dark1};
 `;
 
+const IconCancelX = styled(Icons.CancelX)`
+  color: ${({ theme }) => theme.colors.grayscale.dark1};
+`;
+
+const Actions = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.base};
+`;
+
 function BooleanDisplay({ value }: { value: Boolean }) {
-  return value ? <IconBlack name="check" /> : <IconBlack name="cancel-x" />;
+  return value ? <IconCheck /> : <IconCancelX />;
 }
 
 function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
@@ -176,7 +184,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
 
     if (isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT)) {
       menuData.buttons.push({
-        name: <Icon name="import" />,
+        name: <Icons.Import />,
         buttonStyle: 'link',
         onClick: openDatabaseImportModal,
       });
@@ -289,7 +297,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
             return null;
           }
           return (
-            <span className="actions">
+            <Actions className="actions">
               {canDelete && (
                 <span
                   role="button"
@@ -303,7 +311,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                     title={t('Delete database')}
                     placement="bottom"
                   >
-                    <Icon name="trash" />
+                    <Icons.Trash />
                   </Tooltip>
                 </span>
               )}
@@ -319,7 +327,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                     className="action-button"
                     onClick={handleExport}
                   >
-                    <Icon name="share" />
+                    <Icons.Share />
                   </span>
                 </Tooltip>
               )}
@@ -336,11 +344,11 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                     className="action-button"
                     onClick={handleEdit}
                   >
-                    <Icon name="edit-alt" />
+                    <Icons.EditAlt data-test="edit-alt" />
                   </span>
                 </Tooltip>
               )}
-            </span>
+            </Actions>
           );
         },
         Header: t('Actions'),