Add Icon Symbols using SF Symbols on iOS and Material Symbols on Android on Image

[ichan-mb]

Add new property called Symbol to the Image component. Users can fill with string symbol name that will be rendered become image icon.

The Symbol Mapping feature provides a comprehensive cross-platform mapping system between iOS SF Symbols and Android Material Design Icons. This allows developers to use consistent iconography across both platforms while maintaining native look and feel.

Symbol Naming Convention

Symbols follow iOS SF Symbol naming conventions:

• Use lowercase letters and dots for separators: arrow.left, person.circle
• Fill variants end with .fill: heart.fill, star.fill
• Circle variants include .circle: info.circle, plus.circle
• Badge variants include .badge: bell.badge, envelope.badge

Basic Usage

In UX Markup

<Image Symbol="heart" />
<Image Symbol="star.fill" />
<Image Symbol="house" />

Symbol Categories

Core Actions & Navigation

• Common Actions: plus, minus, trash, edit, search, share
• Navigation: arrow.left, arrow.right, chevron.up, chevron.down
• Media Control: play, pause, stop, volume.up, volume.down

Communication & Social

• Messaging: message, envelope, bubble.left, phone
• Social: person, person.2, heart, star, thumbsup
• Video Calling: video, facetime, shareplay

Status & Indicators

• Alerts: info.circle, warning.triangle, error.circle
• Progress: checkmark, xmark, hourglass, timer
• Notifications: bell, bell.slash, flame

Business & Professional

• Office: briefcase, folder, doc, signature
• Finance: dollarsign.circle, creditcard, chart.bar
• Legal: scale, building.columns, seal

Health & Medical

• Healthcare: heart.text.square, cross.case, stethoscope
• Fitness: figure.run, dumbbell, figure.yoga
• Medical Equipment: pills, syringe, thermometer

Technology & Development

• Devices: iphone, laptop, desktop, applewatch
• Connectivity: wifi, bluetooth, antenna
• Development: code, terminal, function, atom

Transportation & Travel

• Vehicles: car, airplane, bicycle, train
• Travel: suitcase, map, location, compass
• Places: house, building, hotel, restaurant

Entertainment & Media

• Gaming: gamecontroller, dice, trophy
• Music: music.note, guitar, speaker
• Photography: camera, photo, video

Weather & Environment

• Weather: sun.max, cloud, rain, snow
• Environment: leaf, tree, drop, wind
• Climate: thermometer, humidity, hurricane

Shopping & Commerce

• Shopping: cart, bag, basket, storefront
• Payment: creditcard, banknote, receipt
• Commerce: tag, percent, building.2

Home & Living

• Furniture: sofa, chair, bed.double
• Appliances: refrigerator, oven, washer
• Home Systems: air.conditioner, heater, lightbulb

Sports & Recreation

• Sports: football, basketball, tennis.racket
• Activities: figure.skiing, figure.swimming, bicycle
• Achievement: trophy, medal, crown

Education & Science

• Education: book, graduationcap, studentdesk
• Science: atom, flask, microscope
• Mathematics: function, calculator, chart.pie

Security & Privacy

• Security: lock, key, shield, eye
• Authentication: touchid, faceid, qrcode
• Privacy: hand.raised, eye.slash, lock.shield

Symbol Variants

Fill Variants

Many symbols support fill variants for different visual styles:

<!-- Outline version -->
<Image Symbol="heart" />
<!-- Filled version -->
<Image Symbol="heart.fill" />

Circle Variants

Some symbols include circle background variants:

<Image Symbol="info.circle" />
<Image Symbol="checkmark.circle" />
<Image Symbol="xmark.circle" />

Badge Variants

Symbols with notification badges or indicators:

<Image Symbol="bell.badge" />
<Image Symbol="envelope.badge" />
<Image Symbol="cart.badge.plus" />

Complete Symbol List

The mapping includes over 1,000 symbols across these categories:

• Actions (60+ symbols): Basic user actions and operations
• Navigation (40+ symbols): Directional and navigation elements
• Communication (50+ symbols): Messaging, calling, and social features
• Media (45+ symbols): Audio, video, and entertainment controls
• Status (35+ symbols): Alerts, notifications, and indicators
• Security (25+ symbols): Privacy, authentication, and protection
• Health (30+ symbols): Medical, fitness, and wellness
• Business (40+ symbols): Professional and office functions
• Technology (55+ symbols): Devices, development, and connectivity
• Transportation (25+ symbols): Vehicles and travel
• Weather (20+ symbols): Climate and environmental conditions
• Shopping (20+ symbols): Commerce and retail
• Home (35+ symbols): Household and living
• Sports (25+ symbols): Recreation and athletics
• Education (30+ symbols): Learning and academic
• International (15+ symbols): Global and language features
• And many more specialized categories...

This PR contains:

• Changelog
• Documentation
• Tests

[mvondoyannick]

Thanks @ichan-mb waiting merge

[mvondoyannick]

Yes