Icon Migration: Font → SVG
We migrated from a 297 KB Material Symbols font to inline SVG icons, eliminating blocking resources and achieving 92/100 mobile performance.
Performance Impact
Key Improvements
All 59 Migrated Icons
Each icon renders as inline SVG (~400 bytes) instead of loading a 297 KB font file
Navigation & UI (Original Material Icons - 24x24)
Status & Feedback
Business & Commerce
Communication
Calendar & Time
Location & Travel
Services & Industry
Content & Media
Social & Community
Technology & Web
Actions & Utilities
Authentication
Analytics & Growth
Telecom & Infrastructure
Technical Documentation
Migration Process
- 1 Expanded IconSVG Component
Added 59 SVG icons with dual viewBox support (24x24 and 960x960)
- 2 Automated Migration
Replaced all
<span class="material-symbols-outlined">with<IconSVG name="..." /> - 3 Smart Fallback System
Icons without SVG paths automatically fall back to font rendering
- 4 Font Removal
Removed 297 KB Material Symbols font from BaseLayout.astro
<head>
Usage Example
// Import the component
import IconSVG from '@/components/ui/IconSVG.astro';
// Basic usage
<IconSVG name="check_circle" />
// With size customization
<IconSVG name="trending_up" size={32} />
// With color and className
<IconSVG
name="phone"
size={24}
color="currentColor"
className="text-primary-600"
/> Why Inline SVG?
No network request, no font loading delay
Eliminates flash of invisible/unstyled text
~400 bytes per icon vs 297 KB font
HTML cached = icons cached automatically
Performance Optimization Complete
From 76/100 to 92/100 mobile performance by eliminating blocking resources