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

EnxDev · 2025-02-02T23:07:33Z

SUMMARY

This PR improves the overall standardization and maintainability of the project by replacing custom icons with Ant Design 5 icons.
It removes nearly all FontAwesome icons, streamlining the icon set to ensure consistency.
The Icon component has been enhanced to support new features and improved performance.

Additionally, missing icons have been added, and standardized sizing has been applied across various icons, including those used in buttons, to ensure a cohesive UI.

Finally, it eliminates direct imports of icons from Ant Design, simplifying the import structure and improving code readability.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before
After

Tags :

before
after

Filter:

before
after
before
after
before
after
before
after

Tags:

before
after

Table:

Trash:

Link:

before
after

TESTING INSTRUCTIONS

CI should pass
All custom icons replaced with Ant Design 5 icons, should be consistent in color, size, and relevance.

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

…aset-physical) with antd5 icons

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Fix Detected
	Invalid prop passed to AntDesign icon ▹ view

Files scanned

File Path	Reviewed
superset-frontend/src/dashboard/components/DeleteComponentButton.tsx	✅
superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx	✅
superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx	✅
superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx	✅
superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx	✅
superset-frontend/src/features/tags/TagCard.tsx	✅
superset-frontend/src/components/MetadataBar/ContentConfig.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx	✅
superset-frontend/src/components/Icons/index.tsx	✅
superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx	✅
superset-frontend/src/components/Icons/AntdEnhanced.tsx	✅
superset-frontend/src/features/charts/ChartCard.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx	✅
superset-frontend/src/features/dashboards/DashboardCard.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx	✅
superset-frontend/src/pages/CssTemplateList/index.tsx	✅
superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx	✅
superset-frontend/src/dashboard/components/FiltersBadge/index.tsx	✅
superset-frontend/src/pages/AnnotationList/index.tsx	✅
superset-frontend/src/components/TableSelector/index.tsx	✅
superset-frontend/src/pages/AnnotationLayerList/index.tsx	✅
superset-frontend/src/SqlLab/components/QueryTable/index.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx	✅
superset-frontend/src/pages/RowLevelSecurityList/index.tsx	✅
superset-frontend/src/pages/Tags/index.tsx	✅
superset-frontend/src/components/Datasource/CollectionTable.tsx	✅
superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx	✅
superset-frontend/src/pages/AlertReportList/index.tsx	✅
superset-frontend/src/features/alerts/components/NotificationMethod.tsx	✅
superset-frontend/src/pages/SavedQueryList/index.tsx	✅
superset-frontend/src/pages/DatabaseList/index.tsx	✅
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx	✅
superset-frontend/src/pages/DashboardList/index.tsx	✅
superset-frontend/src/pages/ChartList/index.tsx	✅
superset-frontend/src/pages/DatasetList/index.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.

You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.

Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.

Chat with Korbit on issues we post by tagging @korbit-ai in your reply.

Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

Check out our docs on how you can make Korbit work best for you and your team.

Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

Setting Value

Review Schedule Automatic excluding drafts

Max Issue Count 10

Automatic PR Descriptions ❌

Issue Categories

Category Enabled

Documentation ✅

Logging ✅

Error Handling ✅

Readability and Maintainability ✅

Design Patterns ✅

Performance ✅

Security ✅

Functionality ✅

Feedback and Support

Tell us what you think of Korbit

Schedule a call with our team

Email us @ [email protected]

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

superset-frontend/src/features/charts/ChartCard.tsx

…dView, ListView, CaretRight, CaretUp, CaretDown) with antd5 icons

…icons

- Small adjustments for caret down icon - Restored menu icons in the header menu

…eOutlined)

- Replaces custom icon (Refresh) with antd5 icon (SyncOutlined) - Small icons position adjustments

…icon

…td5 icon (CloseOutlined)

- Migrates custom icons (Check, Calendar, FavoriteSelected, FavoriteUnselected, TableOutlined, Alert, AlertSolid, Eye, AlertSolid) to Ant Design 5 icons - Adds SaveOutlined icon to the dashboard save button - Small alignment adjustments for icons - Changes the order of buttons in the chart dropdown on the homepage - Adds custom CircleSolid icon - wip SqlEditorTabHeader

- Replaces custom icons (Check, CheckCircle, CheckSolid, Clock, Minus, FieldDerived, Sql, fa-database) with antd5 icon (CloseOutlined) - Removes TabStatusIcon component

github-actions · 2025-03-16T21:36:18Z

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-03-16T21:41:36Z

@EnxDev Ephemeral environment spinning up at http://34.216.203.11:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

github-actions · 2025-03-18T10:22:02Z

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-03-18T10:31:04Z

@EnxDev Ephemeral environment spinning up at http://52.37.230.84:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

…he/superset into enxdev/refactor-antd5-icons

mistercrunch · 2025-03-18T19:41:05Z

Looks like there's a bit of lint left, highly recommend installing pre-commit if you haven't already

github-actions · 2025-03-18T20:10:11Z

@EnxDev Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-03-18T20:21:33Z

@EnxDev Ephemeral environment spinning up at http://34.219.216.172:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

EnxDev added 3 commits January 31, 2025 19:53

replaces custom icons (trash, link) with antd5 icons

e1e304b

refactor(icons): Replaces custom icons (table, table-chart-title, dat…

54f62ea

…aset-physical) with antd5 icons

refactor(icons): Replaces custom icons (tags, filter) with antd5 icons

4527e1c

EnxDev requested review from michael-s-molina, geido and kgabryje as code owners February 2, 2025 23:07

pull-request-size bot added the size/L label Feb 2, 2025

dosubot bot added change:frontend Requires changing the frontend frontend:refactor:antd5 labels Feb 2, 2025

EnxDev added review:draft and removed change:frontend Requires changing the frontend frontend:refactor:antd5 labels Feb 2, 2025

EnxDev marked this pull request as draft February 2, 2025 23:08

EnxDev added change:frontend Requires changing the frontend frontend:refactor:antd5 labels Feb 2, 2025

korbit-ai bot reviewed Feb 2, 2025

View reviewed changes

superset-frontend/src/features/charts/ChartCard.tsx Outdated Show resolved Hide resolved

michael-s-molina requested a review from kasiazjc February 3, 2025 18:18

EnxDev added 3 commits February 4, 2025 11:08

refactor(icons): Replaces custom icons (LockUnlocked, LockLocked, Car…

948cb3e

…dView, ListView, CaretRight, CaretUp, CaretDown) with antd5 icons

refactor(icons): Replaces custom icons (Plus, PlusCircle) with antd5 …

c814477

…icons

refactor(caretDown):

610adab

- Small adjustments for caret down icon - Restored menu icons in the header menu

pull-request-size bot added size/XL and removed size/L labels Feb 5, 2025

EnxDev added 6 commits February 5, 2025 16:47

refactor(icons): Replaces custom icon (MoreVert) with antd5 icon (Mor…

7d79abb

…eOutlined)

refactor(icons):

7e115a0

- Replaces custom icon (Refresh) with antd5 icon (SyncOutlined) - Small icons position adjustments

wip(close icon): Replaces close custom icon with antd5 CloseOutlined …

eac5b9c

…icon

refactor(icons): Replaces custom icons (fa-x, xSmall, xLarge) with an…

a1c9357

…td5 icon (CloseOutlined)

refactor(icons):

c6da725

- Replaces custom icons (Check, CheckCircle, CheckSolid, Clock, Minus, FieldDerived, Sql, fa-database) with antd5 icon (CloseOutlined) - Removes TabStatusIcon component

pull-request-size bot added size/XXL and removed size/XL labels Feb 10, 2025

fix RTL tests

91c3fe4

EnxDev added testenv-up and removed testenv-up labels Mar 16, 2025

EnxDev requested a review from geido March 16, 2025 21:36

EnxDev added 7 commits March 17, 2025 19:38

refactor(icons): remove unused custom icons

16cfe7b

Merge branch master into enxdev/refactor-antd5-icons

4df972f

Re-add deleted icons: transparent, error_solid_small_red, and error

bdd782a

refactor: remove some fa fa icons, add custom icons files

9c4baea

fix: add missing license for square icon

ea0e4c2

fix rtl tests

686d8ac

lint

3b2a247

EnxDev added testenv-up and removed testenv-up labels Mar 18, 2025

Merge branch 'enxdev/refactor-antd5-icons' of https://github.com/apac…

676503f

…he/superset into enxdev/refactor-antd5-icons

geido approved these changes Mar 18, 2025

View reviewed changes

chore(Icons): Improve alignments and minor fixes

90a2089

geido force-pushed the enxdev/refactor-antd5-icons branch from 67b499e to 90a2089 Compare March 18, 2025 19:16

Merge branch master into enxdev/refactor-antd5-icons

5d9ca55

EnxDev added testenv-up and removed testenv-up labels Mar 18, 2025

lint

47ebfa1

EnxDev merged commit ce6d5f5 into master Mar 18, 2025
48 checks passed

EnxDev deleted the enxdev/refactor-antd5-icons branch March 18, 2025 21:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

EnxDev commented Feb 2, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading

github-actions bot commented Mar 16, 2025

github-actions bot commented Mar 16, 2025

github-actions bot commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

mistercrunch commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Category	Enabled
Documentation	✅
Logging	✅
Error Handling	✅
Readability and Maintainability	✅
Design Patterns	✅
Performance	✅
Security	✅
Functionality	✅

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

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

Conversation

EnxDev commented Feb 2, 2025 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

korbit-ai bot left a comment • edited Loading

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Interacting with Korbit

Customizing Korbit

Current Korbit Configuration

Feedback and Support

Looking to add Korbit to your team? Get started with a free 2 week trial here

github-actions bot commented Mar 16, 2025

github-actions bot commented Mar 16, 2025

github-actions bot commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

mistercrunch commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

github-actions bot commented Mar 18, 2025

EnxDev commented Feb 2, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading