Performance Optimization
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.
92/100
Mobile Score
-270 KB
Weight Saved
59 Icons
SVG Migrated
Performance Impact
BEFORE
Mobile Score
76/100
LCP
3.7s
Font Weight
297 KB
AFTER
Mobile Score
92/100
LCP
2.7s
SVG Weight
~27 KB
Key Improvements
+16 points
Mobile performance score
-1.0 second
Largest Contentful Paint
-270 KB (-91%)
Page weight reduction
No FOIT/FOUT
Instant icon rendering
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)
search
Search functionality
menu
Mobile menu toggle
close
Close dialogs, dismiss alerts
expand_more
Dropdown indicators
arrow_forward
Next, proceed actions
arrow_outward
External links
Status & Feedback
check
Confirmation, success state
check_circle
Completed tasks, success badges
info
Information messages
error
Error states
warning
Warning messages
verified
Verified badges
Business & Commerce
business
Company information
attach_money
Pricing, revenue
credit_card
Payment methods
payments
Transaction icons
shopping_cart
E-commerce
balance
Legal, contracts
Communication
phone
Phone numbers, calls
phone_in_talk
Active calls
email
Email addresses
chat
Messaging features
notifications
Alerts, notifications
Calendar & Time
calendar_month
Date selection
event_available
Available appointments
schedule
Time-based features
Location & Travel
location_on
Addresses, maps
flight
Travel industry
local_shipping
Delivery, logistics
restaurant
Food services
home
Home services
Services & Industry
build
Tools, construction
electrical_services
Electricians
door_open
Locksmiths
vpn_key
Security, access
work
Professional services
Content & Media
description
Documents, articles
newspaper
News, publishing
photo_camera
Photography
visibility
View counts, previews
Social & Community
group
Teams, groups
groups
Multiple users
person
User profiles
favorite
Likes, favorites
star
Ratings, featured
Technology & Web
code
Development
language
Multi-language
public
Global, worldwide
bolt
Speed, performance
speed
Performance metrics
Actions & Utilities
download
Download files
upload
Upload files
edit
Edit content
delete
Delete items
share
Share content
print
Print functionality
bookmark
Saved items
link
URLs, linking
cancel
Cancel actions
refresh
Reload, refresh
Authentication
login
Sign in
logout
Sign out
Analytics & Growth
trending_up
Growth metrics
trending_down
Decline metrics
emoji_events
Achievements
shield
Security, trust
Telecom & Infrastructure
tower
Cell towers, telecom
settings
Configuration
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-google-blue-600"
/>Why Inline SVG?
Instant Rendering
No network request, no font loading delay
No FOIT/FOUT
Eliminates flash of invisible/unstyled text
Smaller Payload
~400 bytes per icon vs 297 KB font
Better Caching
HTML cached = icons cached automatically
Performance Optimization Complete
From 76/100 to 92/100 mobile performance by eliminating blocking resources