fix(material/slide-toggle): prevent icon label text-spacing cutoff (angular#33559)

Update slide-toggle icon styles to match the spacing-safe behavior used in mat-button so text spacing does not clip icon labels.

Fixes b/520469171

Author: essjay05

src/dev-app/slide-toggle/BUILD.bazel

@@ -13,6 +13,7 @@ ng_project(
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/forms",
         "//src/material/button",
+        "//src/material/icon",
         "//src/material/slide-toggle",
     ],
 )

src/dev-app/slide-toggle/slide-toggle-demo.html

@@ -22,6 +22,21 @@
     >No icon</mat-slide-toggle
   >
 
+  <p>With icon as part of the label.</p>
+
+  <mat-slide-toggle [(ngModel)]="firstToggle">
+    <span class="demo-slide-toggle-label-with-icon">
+      <mat-icon>notifications</mat-icon>
+      Notifications
+    </span>
+  </mat-slide-toggle>
+  <mat-slide-toggle labelPosition="before" [(ngModel)]="firstToggle">
+    <span class="demo-slide-toggle-label-with-icon">
+      <mat-icon>volume_up</mat-icon>
+      Sounds
+    </span>
+  </mat-slide-toggle>
+
   <p>With no label.</p>
 
   <mat-slide-toggle aria-label="Toggle only" hideLabel color="primary" [(ngModel)]="firstToggle" />

src/dev-app/slide-toggle/slide-toggle-demo.scss

@@ -13,3 +13,9 @@
   border: 1px solid #ccc;
   padding: 16px;
 }
+
+.demo-slide-toggle-label-with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}

src/dev-app/slide-toggle/slide-toggle-demo.ts

@@ -9,13 +9,14 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'slide-toggle-demo',
   templateUrl: 'slide-toggle-demo.html',
   styleUrl: 'slide-toggle-demo.css',
-  imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
+  imports: [FormsModule, MatButtonModule, MatIconModule, MatSlideToggleModule],
 })
 export class SlideToggleDemo {
   firstToggle = false;

src/material/slide-toggle/slide-toggle.scss

@@ -489,6 +489,12 @@ $fallbacks: m3-slide-toggle.get-tokens();
   // Remove the native outline since we use the ripple for focus indication.
   outline: 0;
 
+  & .mat-icon {
+    // stylelint-disable material/no-prefixes
+    min-height: fit-content;
+    flex-shrink: 0;
+  }
+
   // The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
   .mat-mdc-slide-toggle-ripple,
   .mdc-switch__ripple::after {