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: https://www.youtube.com/watch?v=rUKlQnjU0tc ▶ Ep 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI ▶ Ep 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g ▶ Ep 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0 ▶ Ep 5 – Checkbox Deep Dive: https://www.youtube.com/watch?v=uIimnwjITT0 ▶ Ep 6 – Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY ▶ Ep 7 – Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U ▶ Ep 8 – Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8 ▶ Ep 9 – Surgical Legacy Code Removal: https://www.youtube.com/watch?v=5-p_fnOi0As ▶ Ep 10 – One Token System: https://www.youtube.com/watch?v=JEcD1XXIiA8 ▶ Ep 11 – Styles Not Working? Breaking the Rule: https://www.youtube.com/watch?v=OhJN8Ssp2hA 📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO 💾 Source Code: https://github.com/angelsix 🌐 AngelSix: https://www.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: https://www.youtube.com/watch?v=rUKlQnjU0tc ▶ Ep 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI ▶ Ep 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g ▶ Ep 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0 ▶ Ep 5 – Checkbox Deep Dive: https://www.youtube.com/watch?v=uIimnwjITT0 ▶ Ep 6 – Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY ▶ Ep 7 – Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U ▶ Ep 8 – Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8 ▶ Ep 9 – Surgical Legacy Code Removal: https://www.youtube.com/watch?v=5-p_fnOi0As ▶ Ep 10 – One Token System: https://www.youtube.com/watch?v=JEcD1XXIiA8 ▶ Ep 11 – Styles Not Working? Breaking the Rule: https://www.youtube.com/watch?v=OhJN8Ssp2hA 📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO 💾 Source Code: https://github.com/angelsix 🌐 AngelSix: https://www.angelsix.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #iconpack #sourcegenerators #softwaretutorial