digiserver-v2/ICON_INTEGRATION.md

# SVG Icon Integration

## Overview
Replaced all emoji icons with local SVG files to ensure consistent rendering across all systems, particularly on Raspberry Pi devices where emoji fonts may not be available.

## Icon Files Created
Location: `/app/static/icons/`

1. **moon.svg** - Dark mode toggle (off state)
2. **sun.svg** - Dark mode toggle (on state)
3. **home.svg** - Dashboard/home navigation
4. **monitor.svg** - Players/screens
5. **playlist.svg** - Playlist management
6. **edit.svg** - Edit actions
7. **trash.svg** - Delete actions
8. **upload.svg** - Upload/media files
9. **info.svg** - Information/details
10. **warning.svg** - Warnings/alerts

## Icon Specifications
- **Size**: 24x24 viewBox (scalable)
- **Style**: Feather Icons design (minimal, stroke-based)
- **Color**: Uses `currentColor` for automatic theme adaptation
- **Stroke**: 2px width, round line caps and joins
- **Format**: Clean SVG with no fills (stroke-only for consistency)

## Templates Updated

### 1. base.html (Navigation & Dark Mode)
- Header logo: monitor.svg
- Dashboard link: home.svg
- Players link: monitor.svg
- Playlists link: playlist.svg
- Dark mode toggle: moon.svg ↔ sun.svg (dynamic)

**CSS Changes:**
- Added icon support to nav links with `display: flex`
- Icons use `filter: brightness(0) invert(1)` for white color on dark header
- Dark mode toggle icon changes via JavaScript using `src` attribute

### 2. dashboard.html (Stats Cards & Quick Actions)
- Players card: monitor.svg
- Playlists card: playlist.svg
- Media Library card: upload.svg
- Storage card: info.svg
- Quick Actions buttons: monitor.svg, playlist.svg, upload.svg
- Workflow Guide header: info.svg

### 3. content_list_new.html (Playlist Management)
- Page header: playlist.svg
- Playlists card header: playlist.svg
- Delete button: trash.svg
- Empty state: playlist.svg (64px, opacity 0.3)
- Upload Media card header: upload.svg
- Upload icon (large): upload.svg (96px, opacity 0.5)
- Go to Upload button: upload.svg
- Media library icons: info.svg (images), monitor.svg (videos)
- Player Assignments header: monitor.svg

### 4. upload_media.html (Upload Page)
- Page header: upload.svg
- Back button: playlist.svg
- Select Files card: upload.svg
- Drag-drop zone: upload.svg (96px, opacity 0.3)
- Browse button: upload.svg
- Upload Settings header: info.svg
- Upload button: upload.svg

### 5. manage_player.html (Player Management)
- Page header: monitor.svg
- Back button: monitor.svg
- Status icons: info.svg (online), warning.svg (offline)
- Edit Credentials card: edit.svg
- Save button: edit.svg
- Assign Playlist card: playlist.svg
- Warning alert: warning.svg
- Assign button: playlist.svg
- Create Playlist button: playlist.svg
- Edit Playlist button: edit.svg
- Player Logs card: info.svg

## Usage Pattern
```html
<!-- Standard icon in heading -->
<h2 style="display: flex; align-items: center; gap: 0.5rem;">
    <img src="{{ url_for('static', filename='icons/playlist.svg') }}" alt="" style="width: 24px; height: 24px;">
    Playlists
</h2>

<!-- Icon in button (white on colored background) -->
<button class="btn btn-success" style="display: flex; align-items: center; gap: 0.5rem;">
    <img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 18px; height: 18px; filter: brightness(0) invert(1);">
    Upload Files
</button>

<!-- Large decorative icon -->
<img src="{{ url_for('static', filename='icons/upload.svg') }}" alt="" style="width: 96px; height: 96px; opacity: 0.3;">
```

## Benefits
1. **Reliability**: Icons always render correctly, no dependency on system fonts
2. **Scalability**: SVG format scales cleanly to any size
3. **Themeable**: `currentColor` allows icons to inherit text color
4. **Performance**: Small file sizes (< 1KB each)
5. **Consistency**: Uniform design language across entire application
6. **Accessibility**: Clean, recognizable icons work well in both light and dark modes

## Browser Compatibility
- All modern browsers support inline SVG
- No JavaScript required (except dark mode toggle)
- Works on Raspberry Pi browsers (Chromium, Firefox)
- Filter properties supported in all target browsers

## Dark Mode Integration
The dark mode toggle now uses SVG icons instead of emoji:
- Moon icon (🌙) → moon.svg
- Sun icon (☀️) → sun.svg
- Icons change dynamically via JavaScript when theme is toggled
- White color achieved via CSS filter on dark header background

## Future Icon Needs
If additional icons are needed, follow this pattern:
1. Use Feather Icons style (https://feathericons.com/)
2. 24x24 viewBox, stroke-width="2"
3. Use `stroke="currentColor"` for theme compatibility
4. Save to `/app/static/icons/`
5. Reference via `{{ url_for('static', filename='icons/name.svg') }}`

## Testing Checklist
- [x] Header navigation icons display correctly
- [x] Dark mode toggle icons switch properly
- [x] Dashboard card icons visible
- [x] Playlist management icons render
- [x] Upload page icons functional
- [x] Player management icons working
- [ ] Test on actual Raspberry Pi device
- [ ] Verify icon visibility in both light/dark modes
- [ ] Check icon alignment across different screen sizes