[DPEDE-6330] Migrate icons to material symbols#1942
[DPEDE-6330] Migrate icons to material symbols#1942mattnickles wants to merge 14 commits intomasterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR migrates Chi's icon system from a custom icon font and SVG sprites to Google Material Symbols Outlined font. The migration enables access to 2,500+ icons without requiring build processes for updates, while maintaining backward compatibility through icon name mappings.
Changes:
- Replaced custom
chiicon font with Material Symbols Outlined font from Google Fonts CDN - Added comprehensive icon mapping in
icon-mapping.scssto preserve existing icon class names - Updated icon references across components to use Material Symbols ligature names instead of unicode values
- Removed SVG sprite generation and related build scripts
- Adjusted icon sizing throughout components to accommodate the new font system
Reviewed changes
Copilot reviewed 23 out of 378 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
src/chi/components/icons/icons.scss |
Core icon component refactored to use Material Symbols font with ligatures, removed SVG handling |
src/chi/components/icons/icon-mapping.scss |
New file mapping 300+ Chi icon names to Material Symbols equivalents with fill states |
src/chi/components/dropdown/dropdown.scss |
Updated chevron icon references from unicode to ligature names |
src/chi/components/card/card.scss |
Updated arrow icon reference from unicode to ligature name |
src/chi/components/buttons/buttons.scss |
Simplified icon sizing rules for new font-based icons |
src/chi/components/badge/badge.scss |
Adjusted icon dimensions for Material Symbols font |
src/chi/components/avatars/avatars.scss |
Updated icon sizing and alignment for font-based icons |
src/chi/components/alert/_alert-common.scss |
Updated close button icon sizing |
src/chi/components/accordion/accordion.scss |
Changed icon reference from unicode to ligature name |
src/chi/_global-variables.scss |
Changed global icon font family from 'chi' to 'Material Symbols Outlined' |
scripts/build/utils/buildSprites.js |
Removed SVG sprite generation script (no longer needed) |
scripts/build/utils/buildIcons.js |
Removed icon font and SVG copying tasks |
scripts/build/build.sh |
Removed sprite build step from build process |
cypress/fixtures/chidata.json |
Removed icon list fixture (icons now available via font) |
backstop-non-responsive.json |
Removed SVG-specific visual regression tests |
backstop-non-responsive-ce.json |
Updated test selectors from SVG to icon-based naming |
assets/themes/*/\_content.scss |
Updated checkmark icon references across all themes from unicode to ligature name |
.github/copilot-instructions.md |
Updated documentation to reflect Material Symbols migration |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/1/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/2/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/3/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/4/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/5/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/6/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/7/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/8/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/9/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/11/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/12/. ❌ |
|
The CI pipeline did not run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/13/. ❌ |
|
SonarQube Quality Gate
|
|
The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-1942/14/. ✅ |
|
You can check this PRs instance in https://nginx-pr-1942-ux-chi.rke-odc-test.corp.intranet (internal) |
2 participants
https://lumen.atlassian.net/browse/DPEDE-6330