Icons: Replace MUI icons with Lucide React #19000
Description
Overview
Replace all MUI icons with Lucide React equivalents for consistency and better tree-shaking.
Parent Issue: #18993
Estimated Duration: 1-2 days
Priority: Low
Depends on: #18994 (Setup)
Icon Usage Analysis
36 unique MUI icons used across 30+ files:
High Usage Icons (>2 instances)
- GitHub: 5 usages
- VpnKey: 2 usages
- PublicOutlined: 2 usages
- NotificationsOffOutlined: 2 usages
- EditOutlined: 2 usages
- Business: 2 usages
Single Usage Icons (32 icons)
- Authentication: PasswordOutlined, LockOpen, Lock, KeyOutlined
- Notifications: NotificationsOutlined, NotificationsNoneOutlined
- Actions: Edit, Replay, Autorenew, CheckOutlined, CancelOutlined
- Navigation: ArrowForwardOutlined, ArrowDownwardOutlined, ExpandMore
- Data: DownloadOutlined, FileCopyOutlined, HideSourceOutlined
- System: Computer, Sensors, BuildCircleOutlined, Brush
- Organization: Group, GroupOutlined, Business, HubOutlined
- Location: LocationOnOutlined, LinkOutlined
- Security: ShieldOutlined, RadioButtonCheckedOutlined
- History: HistoryOutlined
- Format: FormatAlignLeftOutlined
Tasks
Icon Mapping
- Create MUI to Lucide icon mapping table
- Identify exact Lucide equivalents
- Handle icons without direct equivalents
- Document icon size and styling differences
Icon Replacement
- Replace GitHub icons (5 instances)
- Update authentication icons (8 instances)
- Migrate notification icons (4 instances)
- Replace action icons (10 instances)
- Update navigation icons (3 instances)
- Migrate data/system icons (11 instances)
Icon Utilities
- Create icon size standardization utility
- Set up icon color theming
- Ensure consistent icon spacing
- Update icon accessibility attributes
Icon Mapping Table
| MUI Icon | Lucide Equivalent | Notes |
|---|---|---|
| GitHub | Github | Direct match |
| EditOutlined | Edit | Direct match |
| CheckOutlined | Check | Direct match |
| CancelOutlined | X | Close equivalent |
| DownloadOutlined | Download | Direct match |
| ArrowForwardOutlined | ArrowRight | Direction match |
| ArrowDownwardOutlined | ArrowDown | Direction match |
| ExpandMore | ChevronDown | Expansion equivalent |
| LockOpen | Unlock | Direct match |
| Lock | Lock | Direct match |
| VpnKey | Key | Key equivalent |
| KeyOutlined | Key | Direct match |
| PasswordOutlined | KeyRound | Password equivalent |
| NotificationsOutlined | Bell | Notification equivalent |
| NotificationsOffOutlined | BellOff | Direct match |
| NotificationsNoneOutlined | BellMinus | No notifications |
| Group | Users | Group equivalent |
| GroupOutlined | Users | Group equivalent |
| Business | Building | Business equivalent |
| Computer | Monitor | Computer equivalent |
| LocationOnOutlined | MapPin | Location equivalent |
| LinkOutlined | Link | Direct match |
| FileCopyOutlined | Copy | Copy equivalent |
| HideSourceOutlined | EyeOff | Hide equivalent |
| ShieldOutlined | Shield | Direct match |
| Sensors | Activity | Sensor equivalent |
| Replay | RotateCcw | Replay equivalent |
| Autorenew | RefreshCw | Auto-refresh equivalent |
| BuildCircleOutlined | Settings | Build/config equivalent |
| Brush | Palette | Brush/theme equivalent |
| HubOutlined | Network | Hub equivalent |
| HistoryOutlined | History | Direct match |
| FormatAlignLeftOutlined | AlignLeft | Direct match |
| RadioButtonCheckedOutlined | RadioButton | Radio equivalent |
| PublicOutlined | Globe | Public equivalent |
Implementation Strategy
- Mapping: Create comprehensive icon mapping
- Batch Replace: Replace icons by category
- Size Standardization: Ensure consistent sizing
- Testing: Verify visual consistency
- Cleanup: Remove MUI icon imports
Acceptance Criteria
- All MUI icons replaced with Lucide equivalents
- Icon sizes are consistent
- Icon colors follow theme
- No visual regressions
- Bundle size reduced
- All icon tests pass
Files to Update
High Priority Files
- Authentication components
- Navigation components
- Action buttons
- Status indicators
- Form components
Testing Requirements
- Visual regression testing
- Icon accessibility testing
- Bundle size analysis
- Cross-browser compatibility
Documentation
- Icon usage guidelines
- Icon mapping reference
- Accessibility best practices