MosisService/docs/MATERIAL-DESIGN.md

Material Design Resources

Material Design icons and components are available in the MosisDesigner repository.

Material Design Icons

Location: D:\Dev\Mosis\MosisDesigner\material-design-icons

A comprehensive icon library from Google with 2000+ icons across 20 categories:

Category	Examples
action	home, search, settings, delete, info
alert	error, warning, notification
av	play, pause, volume, mic
communication	phone, message, email, contacts
content	add, remove, copy, paste
device	battery, wifi, bluetooth, gps
editor	format, text, color, brush
file	folder, attachment, download, upload
hardware	keyboard, mouse, phone, tablet
home	lightbulb, thermostat, security
image	camera, photo, filter, tune
maps	location, directions, navigation
navigation	arrow, chevron, menu, close
notification	sync, update, event
places	hotel, restaurant, airport
search	search variants
social	share, person, group, notifications
toggle	star, checkbox, radio

Available Formats:

• src/ - SVG source files organized by category
• png/ - PNG files at multiple DPIs (24dp, 36dp, 48dp)
• font/ - Icon fonts (WOFF, TTF)
• symbols/ - Material Symbols variable font (newer)
• variablefont/ - Variable font files

Icon Styles:

• Outlined (default)
• Filled
• Rounded
• Sharp
• Two-tone (Material Icons only)

Material Design Lite

Location: D:\Dev\Mosis\MosisDesigner\material-design-lite

CSS/JS component library implementing Material Design (reference implementation):

Directory	Contents
src/	SASS source for components
docs/	Component documentation
templates/	Page templates

Key Components (for design reference):

• Buttons (raised, flat, FAB)
• Cards
• Dialogs
• Lists
• Menus
• Navigation drawers
• Progress indicators
• Sliders
• Snackbars
• Tables
• Tabs
• Text fields
• Tooltips

Using Icons in Mosis

1. Find icon at https://fonts.google.com/icons
2. Export SVG from material-design-icons/src/<category>/<name>/
3. Convert to TGA using image tool (24x24 or 32x32, RGBA)
4. Place in src/main/assets/icons/
5. Reference in RML: <img src="../../icons/<name>.tga"/>