From 21643dfca5eb30304056a1e7a100cbe73fea986e Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Mon, 20 Jul 2026 15:27:19 -0700
Subject: [PATCH] fix(material/slide-toggle): prevent icon label text-spacing
 cutoff

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
---
 src/dev-app/slide-toggle/BUILD.bazel            |  1 +
 src/dev-app/slide-toggle/slide-toggle-demo.html | 15 +++++++++++++++
 src/dev-app/slide-toggle/slide-toggle-demo.scss |  6 ++++++
 src/dev-app/slide-toggle/slide-toggle-demo.ts   |  3 ++-
 src/material/slide-toggle/slide-toggle.scss     |  6 ++++++
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/dev-app/slide-toggle/BUILD.bazel b/src/dev-app/slide-toggle/BUILD.bazel
index dc184702b6bb..7adb91bf3ed7 100644
--- a/src/dev-app/slide-toggle/BUILD.bazel
+++ b/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",
     ],
 )
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.html b/src/dev-app/slide-toggle/slide-toggle-demo.html
index 5cc0f0d3cd71..be54699ce2ee 100644
--- a/src/dev-app/slide-toggle/slide-toggle-demo.html
+++ b/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" />
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.scss b/src/dev-app/slide-toggle/slide-toggle-demo.scss
index 3a762b59c2c3..d3781ee08bd9 100644
--- a/src/dev-app/slide-toggle/slide-toggle-demo.scss
+++ b/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;
+}
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.ts b/src/dev-app/slide-toggle/slide-toggle-demo.ts
index 10c647c09e24..840b22982f7c 100644
--- a/src/dev-app/slide-toggle/slide-toggle-demo.ts
+++ b/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;
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index a71076f717db..d504cb9b2357 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/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 {