build: change icons in dev app based on state (#28188)

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.
angular · Nov 27, 2023 · 950f1b7 · 950f1b7
1 parent 9e43890
commit 950f1b7
Showing 1 changed file with 30 additions and 6 deletions.
diff --git 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