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

<!-- 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

• Header navigation icons display correctly
• Dark mode toggle icons switch properly
• Dashboard card icons visible
• Playlist management icons render
• Upload page icons functional
• 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