From 96a686327e24c70fbb8ce510add05354dea9af8b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 8 Nov 2023 12:52:20 +0100
Subject: [PATCH] build: change icons in dev app based on state

Minor UX improvement to the dev app that makes it so the icons in the toolbar change depending on the state. This makes it easier to tell when the value has changed.
---
 src/dev-app/dev-app/dev-app-layout.html | 36 ++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
index 56eb8f7a8fa9..62bbfa434256 100644
--- a/src/dev-app/dev-app/dev-app-layout.html
+++ b/src/dev-app/dev-app/dev-app-layout.html
@@ -55,37 +55,61 @@ <h1>Angular Material Demos</h1>
             mat-icon-button
             (click)="toggleM3()"
             [matTooltip]="state.m3Enabled ? 'Use M2 theme' : 'Use M3 theme'">
-            <mat-icon>brush</mat-icon>
+            @if (state.m3Enabled) {
+              <mat-icon>invert_colors_off</mat-icon>
+            } @else {
+              <mat-icon>invert_colors</mat-icon>
+            }
           </button>
           <button
             mat-icon-button
             (click)="toggleAnimations()"
             [matTooltip]="state.animations ? 'Disable animations' : 'Enable animations'">
-            <mat-icon>animation</mat-icon>
+            @if (state.animations) {
+              <mat-icon>pause_circle</mat-icon>
+            } @else {
+              <mat-icon>animation</mat-icon>
+            }
           </button>
           <button
             mat-icon-button
             (click)="toggleTheme()"
             [matTooltip]="state.darkTheme ? 'Switch to light theme' : 'Switch to dark theme'">
-            <mat-icon>dark_mode</mat-icon>
+            @if (state.darkTheme) {
+              <mat-icon>light_mode</mat-icon>
+            } @else {
+              <mat-icon>dark_mode</mat-icon>
+            }
           </button>
           <button
             mat-icon-button
             (click)="toggleRippleDisabled()"
             [matTooltip]="state.rippleDisabled ? 'Enable ripples' : 'Disable ripples'">
-            <mat-icon>waves</mat-icon>
+            @if (state.rippleDisabled) {
+              <mat-icon>waves</mat-icon>
+            } @else {
+              <mat-icon>water</mat-icon>
+            }
           </button>
           <button
             mat-icon-button
             (click)="toggleStrongFocus()"
             [matTooltip]="state.strongFocusEnabled ? 'Disable strong focus' : 'Enable strong focus'">
-            <mat-icon>accessibility</mat-icon>
+            @if (state.strongFocusEnabled) {
+              <mat-icon>not_accessible</mat-icon>
+            } @else {
+              <mat-icon>accessibility</mat-icon>
+            }
           </button>
           <button
             mat-icon-button
             (click)="toggleDirection()"
             [matTooltip]="state.direction === 'rtl' ? 'Switch to LTR' : 'Switch to RTL'">
-            <mat-icon>keyboard_tab_rtl</mat-icon>
+            @if (state.direction === 'rtl') {
+              <mat-icon>west</mat-icon>
+            } @else {
+              <mat-icon>east</mat-icon>
+            }
           </button>
           <button
             mat-icon-button