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.

(cherry picked from commit 950f1b7)

Author: crisbeto

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