Uploaded August 2026 | Updated September 2026, 3 weeks ago
Avalonia finally has a proper icon system — and it didn't start that way. It started as one
duplicated arrow buried inside a Button Spinner, and by the end of this episode it's a fully
source-generated icon library with its own clean namespace.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How a token-based theme engine replaces hardcoded colors/sizes with semantic
values (surface, primary, warning) instead of copy-pasted hex codes
• New focus states on buttons — and how styles smartly blend hover/press colors
with whatever accent is active
• The Control Template rule that matters more than any other: only use
TemplateBinding inside a template, or you silently block every style override
• How one duplicated arrow (stream geometry) turned into a full icon system
• The new `icons:` syntax and the ThemeIconGallery — swap an entire icon set by
swapping one class
• Why icons were cluttering the theme namespace, and how a source generator
(Angel6 Theme Engine NuGet v1.2.6) solves it cleanly
• A live Icon Gallery preview for browsing and customizing every glyph
• What's next: full control coverage, a demo app, and a live in-app theme editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Theme Lab intro & progress recap
[0:43] – Why we switched to a prototype-first approach
[1:40] – Button focus states & smart accent blending
[2:45] – The one Control Template rule you must never break
[4:10] – Refining the Button: fonts, padding, focus styles
[5:05] – From one duplicated arrow to a full icon system
[6:00] – New icon syntax & the ThemeIconGallery
[7:25] – Source generators: giving icons their own clean namespace
[9:25] – Icon Gallery preview & customizing individual glyphs
[10:45] – What's next: full coverage, localization, live theme editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Ep 1 – Setup: youtube.com/watch?v=rUKlQnjU0tc
▶ Ep 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Ep 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Ep 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
▶ Ep 5 – Checkbox Deep Dive: youtube.com/watch?v=uIimnwjITT0
▶ Ep 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Ep 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
▶ Ep 8 – Design Token System: youtube.com/watch?v=QMVdxRZqaU8
▶ Ep 9 – Surgical Legacy Code Removal: youtube.com/watch?v=5-p_fnOi0As
▶ Ep 10 – One Token System: youtube.com/watch?v=JEcD1XXIiA8
▶ Ep 11 – Styles Not Working? Breaking the Rule: youtube.com/watch?v=OhJN8Ssp2hA
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #iconpack #sourcegenerators #softwaretutorial
Avalonia finally has a proper icon system — and it didn't start that way. It started as one
duplicated arrow buried inside a Button Spinner, and by the end of this episode it's a fully
source-generated icon library with its own clean namespace.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How a token-based theme engine replaces hardcoded colors/sizes with semantic
values (surface, primary, warning) instead of copy-pasted hex codes
• New focus states on buttons — and how styles smartly blend hover/press colors
with whatever accent is active
• The Control Template rule that matters more than any other: only use
TemplateBinding inside a template, or you silently block every style override
• How one duplicated arrow (stream geometry) turned into a full icon system
• The new `icons:` syntax and the ThemeIconGallery — swap an entire icon set by
swapping one class
• Why icons were cluttering the theme namespace, and how a source generator
(Angel6 Theme Engine NuGet v1.2.6) solves it cleanly
• A live Icon Gallery preview for browsing and customizing every glyph
• What's next: full control coverage, a demo app, and a live in-app theme editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Theme Lab intro & progress recap
[0:43] – Why we switched to a prototype-first approach
[1:40] – Button focus states & smart accent blending
[2:45] – The one Control Template rule you must never break
[4:10] – Refining the Button: fonts, padding, focus styles
[5:05] – From one duplicated arrow to a full icon system
[6:00] – New icon syntax & the ThemeIconGallery
[7:25] – Source generators: giving icons their own clean namespace
[9:25] – Icon Gallery preview & customizing individual glyphs
[10:45] – What's next: full coverage, localization, live theme editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Ep 1 – Setup: youtube.com/watch?v=rUKlQnjU0tc
▶ Ep 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Ep 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Ep 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
▶ Ep 5 – Checkbox Deep Dive: youtube.com/watch?v=uIimnwjITT0
▶ Ep 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Ep 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
▶ Ep 8 – Design Token System: youtube.com/watch?v=QMVdxRZqaU8
▶ Ep 9 – Surgical Legacy Code Removal: youtube.com/watch?v=5-p_fnOi0As
▶ Ep 10 – One Token System: youtube.com/watch?v=JEcD1XXIiA8
▶ Ep 11 – Styles Not Working? Breaking the Rule: youtube.com/watch?v=OhJN8Ssp2hA
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #iconpack #sourcegenerators #softwaretutorial
