80 lines
2.3 KiB
Markdown
80 lines
2.3 KiB
Markdown
# 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"/>`
|