VT_Player/docs/MATERIAL_ICONS_MAPPING.md

Material Icons Mapping for VT_Player

Using Google Material Icons for clean, professional UI.

Icon Sources

• Material Symbols: https://fonts.google.com/icons
• Format: We'll use Material Symbols (variable font with fill/weight options)
• License: Apache 2.0 (free for commercial use)

Integration Methods

Option 1: Unicode Characters (Simplest)

Use Material Icons font and insert unicode characters directly in Go strings.

Option 2: SVG Downloads (Recommended)

Download SVG files from Google Fonts and bundle with app.

Option 3: Icon Font (Best for scaling)

Use Material Symbols variable font with Fyne's text rendering.

Icon Mappings (Material Symbols Names)

Playback Controls

Function	Material Icon	Unicode	Ligature
Play	play_arrow	U+E037	play_arrow
Pause	pause	U+E034	pause
Stop	stop	U+E047	stop
Previous	skip_previous	U+E045	skip_previous
Next	skip_next	U+E044	skip_next
Rewind	fast_rewind	U+E020	fast_rewind
Fast Forward	fast_forward	U+E01F	fast_forward

Frame Navigation (Frame-Accurate Mode)

Function	Material Icon	Unicode	Notes
Frame Previous	navigate_before	U+E408	Or chevron_left
Frame Next	navigate_next	U+E409	Or chevron_right
Keyframe Previous	first_page	U+E5DC	Double chevron left
Keyframe Next	last_page	U+E5DD	Double chevron right

Volume Controls

Function	Material Icon	Unicode	Ligature
Volume High	volume_up	U+E050	volume_up
Volume Medium	volume_down	U+E04D	volume_down
Volume Low	volume_mute	U+E04E	volume_mute
Volume Muted	volume_off	U+E04F	volume_off

Playlist Management

Function	Material Icon	Unicode	Ligature
Playlist/Menu	menu	U+E5D2	menu
Add to Playlist	playlist_add	U+E03B	playlist_add
Remove from Playlist	playlist_remove	U+E958	playlist_remove
Clear Playlist	clear_all	U+E0B8	clear_all
Playlist Play	playlist_play	U+E05F	playlist_play

Cut/Edit Tools

Function	Material Icon	Unicode	Ligature
Set In Point	first_page	U+E5DC	Or start
Set Out Point	last_page	U+E5DD	Or end
Cut/Scissors	content_cut	U+E14E	content_cut
Export	file_download	U+E2C4	file_download
Clear Markers	clear	U+E14C	clear

File Operations

Function	Material Icon	Unicode	Ligature
Open File	folder_open	U+E2C8	folder_open
Open Folder	folder	U+E2C7	folder
Save	save	U+E161	save
Screenshot	photo_camera	U+E412	photo_camera

View/Display

Function	Material Icon	Unicode	Ligature
Fullscreen	fullscreen	U+E5D0	fullscreen
Fullscreen Exit	fullscreen_exit	U+E5D1	fullscreen_exit
Aspect Ratio	aspect_ratio	U+E85B	aspect_ratio
Subtitles	closed_caption	U+E01C	closed_caption
Chapters	list	U+E896	list

Settings/Options

Function	Material Icon	Unicode	Ligature
Settings	settings	U+E8B8	settings
Audio Track	audiotrack	U+E3A1	audiotrack
Video Track	videocam	U+E04B	videocam
Speed	speed	U+E9E4	speed
Loop	repeat	U+E040	repeat
Loop One	repeat_one	U+E041	repeat_one

Navigation/UI

Function	Material Icon	Unicode	Ligature
Back	arrow_back	U+E5C4	arrow_back
Forward	arrow_forward	U+E5C8	arrow_forward
Up	arrow_upward	U+E5D8	arrow_upward
Down	arrow_downward	U+E5DB	arrow_downward
Close	close	U+E5CD	close
More Options	more_vert	U+E5D4	more_vert

Status Indicators

Function	Material Icon	Unicode	Ligature
Info	info	U+E88E	info
Warning	warning	U+E002	warning
Error	error	U+E000	error
Success	check_circle	U+E86C	check_circle
Loading	hourglass_empty	U+E88B	hourglass_empty

Implementation Plan

Phase 1: Font Integration

1. Download Material Symbols font from Google Fonts
2. Bundle font file in assets/fonts/MaterialSymbols.ttf
3. Load font in Fyne application startup
4. Create helper functions for icon rendering

Phase 2: Icon Helper Package

Create internal/ui/icons.go:

package ui

import (
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/canvas"
)

// Material icon unicode constants
const (
    IconPlayArrow      = "\ue037"
    IconPause          = "\ue034"
    IconStop           = "\ue047"
    IconSkipPrevious   = "\ue045"
    IconSkipNext       = "\ue044"
    IconMenu           = "\ue5d2"
    IconVolumeUp       = "\ue050"
    IconVolumeOff      = "\ue04f"
    // ... more icons
)

// NewIconText creates a text widget with Material Icon
func NewIconText(icon string, size float32) *canvas.Text {
    text := canvas.NewText(icon, color.White)
    text.TextSize = size
    text.TextStyle = fyne.TextStyle{Monospace: true}
    return text
}

// NewIconButton creates a button with Material Icon
func NewIconButton(icon string, tooltip string, tapped func()) *widget.Button {
    btn := widget.NewButton(icon, tapped)
    btn.Importance = widget.LowImportance
    return btn
}

Phase 3: Replace Current Icons

Update all emoji-based icons with Material Icons:

• Play/Pause: ▶/⏸ → play_arrow/pause
• Previous/Next: ⏮/⏭ → skip_previous/skip_next
• Volume: 🔊/🔇 → volume_up/volume_off
• Menu: ☰ → menu

Download Instructions

Material Symbols Font

1. Go to: https://fonts.google.com/icons
2. Select "Material Symbols Rounded" (recommended for modern look)
3. Click "Download all" or select specific icons
4. Extract font file: MaterialSymbolsRounded-VariableFont.ttf

Individual SVG Icons (Alternative)

1. Browse icons at https://fonts.google.com/icons
2. Click icon → Download SVG
3. Save to assets/icons/[icon-name].svg

Advantages of Material Icons

✅ Consistent Design: All icons follow same design language ✅ Professional: Industry-standard, used by Google/Android ✅ Comprehensive: 2500+ icons cover all use cases ✅ Free: Apache 2.0 license (no attribution required) ✅ Scalable: Vector format scales to any size ✅ Variable: Can adjust weight, fill, optical size ✅ Accessible: Widely recognized symbols

Next Steps

1. Download Material Symbols font
2. Create icon helper package
3. Update all buttons to use Material Icons
4. Test rendering on Linux (Fyne + GTK)
5. Add icon customization (size, color themes)