feat(material/slide-toggle): allow for icon to be hidden (#27330)

Adds an input that allows users to opt into hiding the slide toggle icon.

Fixes #27321.

Author: crisbeto

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

@@ -1,29 +1,15 @@
 <div class="demo-slide-toggle">
-
-  <mat-slide-toggle color="primary" [(ngModel)]="firstToggle">
-    Default Slide Toggle
-  </mat-slide-toggle>
-
-  <mat-slide-toggle [(ngModel)]="firstToggle" disabled>
-    Disabled Slide Toggle
-  </mat-slide-toggle>
-
-  <mat-slide-toggle [disabled]="firstToggle">
-    Disable Bound
-  </mat-slide-toggle>
+  <mat-slide-toggle color="primary" [(ngModel)]="firstToggle">Default Slide Toggle</mat-slide-toggle>
+  <mat-slide-toggle [(ngModel)]="firstToggle" disabled>Disabled Slide Toggle</mat-slide-toggle>
+  <mat-slide-toggle [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
+  <mat-slide-toggle hideIcon [(ngModel)]="firstToggle">No icon</mat-slide-toggle>
 
   <p>Example where the slide toggle is required inside of a form.</p>
 
   <form #form="ngForm" (ngSubmit)="onFormSubmit()">
-
-    <mat-slide-toggle name="slideToggle" [(ngModel)]="formToggle">
-      Slide Toggle
-    </mat-slide-toggle>
-
+    <mat-slide-toggle name="slideToggle" [(ngModel)]="formToggle">Slide Toggle</mat-slide-toggle>
     <p>
       <button mat-raised-button type="submit">Submit Form</button>
     </p>
-
   </form>
-
-</div>
+</div>

src/material/slide-toggle/slide-toggle-config.ts

@@ -15,13 +15,16 @@ export interface MatSlideToggleDefaultOptions {
 
   /** Default color for slide toggles. */
   color?: ThemePalette;
+
+  /** Whether to hide the icon inside the slide toggle. */
+  hideIcon?: boolean;
 }
 
 /** Injection token to be used to override the default options for `mat-slide-toggle`. */
 export const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = new InjectionToken<MatSlideToggleDefaultOptions>(
   'mat-slide-toggle-default-options',
   {
     providedIn: 'root',
-    factory: () => ({disableToggleValue: false}),
+    factory: () => ({disableToggleValue: false, hideIcon: false}),
   },
 );

src/material/slide-toggle/slide-toggle.html

@@ -31,7 +31,7 @@
             [matRippleDisabled]="disableRipple || disabled"
             [matRippleCentered]="true"></div>
         </div>
-        <div class="mdc-switch__icons">
+        <div class="mdc-switch__icons" *ngIf="!hideIcon">
           <svg
             class="mdc-switch__icon mdc-switch__icon--on"
             viewBox="0 0 24 24"

src/material/slide-toggle/slide-toggle.spec.ts

@@ -346,6 +346,15 @@ describe('MDC-based MatSlideToggle without forms', () => {
       const rippleElement = slideToggleElement.querySelector('.mat-mdc-slide-toggle-ripple')!;
       expect(rippleElement.classList).toContain('mat-mdc-focus-indicator');
     }));
+
+    it('should be able to hide the icon', fakeAsync(() => {
+      expect(slideToggleElement.querySelector('.mdc-switch__icons')).toBeTruthy();
+
+      testComponent.hideIcon = true;
+      fixture.detectChanges();
+
+      expect(slideToggleElement.querySelector('.mdc-switch__icons')).toBeFalsy();
+    }));
   });
 
   describe('custom template', () => {
@@ -798,6 +807,7 @@ describe('MDC-based MatSlideToggle with forms', () => {
                      [tabIndex]="slideTabindex"
                      [labelPosition]="labelPosition"
                      [disableRipple]="disableRipple"
+                     [hideIcon]="hideIcon"
                      (toggleChange)="onSlideToggleChange()"
                      (dragChange)="onSlideDragChange()"
                      (change)="onSlideChange($event)"
@@ -822,6 +832,7 @@ class SlideToggleBasic {
   toggleTriggered: number = 0;
   dragTriggered: number = 0;
   direction: Direction = 'ltr';
+  hideIcon = false;
 
   onSlideClick: (event?: Event) => void = () => {};
   onSlideChange = (event: MatSlideToggleChange) => (this.lastEvent = event);

src/material/slide-toggle/slide-toggle.ts

@@ -145,6 +145,16 @@ export abstract class _MatSlideToggleBase<T>
     this._changeDetectorRef.markForCheck();
   }
 
+  /** Whether to hide the icon inside of the slide toggle. */
+  @Input()
+  get hideIcon(): boolean {
+    return this._hideIcon;
+  }
+  set hideIcon(value: BooleanInput) {
+    this._hideIcon = coerceBooleanProperty(value);
+  }
+  private _hideIcon = false;
+
   /** An event will be dispatched each time the slide-toggle changes its value. */
   @Output() readonly change: EventEmitter<T> = new EventEmitter<T>();
 
@@ -174,6 +184,7 @@ export abstract class _MatSlideToggleBase<T>
     this.color = this.defaultColor = defaults.color || 'accent';
     this._noopAnimations = animationMode === 'NoopAnimations';
     this.id = this._uniqueId = `${idPrefix}${++nextUniqueId}`;
+    this._hideIcon = defaults.hideIcon ?? false;
   }
 
   ngAfterContentInit() {

tools/public_api_guard/material/slide-toggle.md

@@ -80,6 +80,8 @@ export abstract class _MatSlideToggleBase<T> extends _MatSlideToggleMixinBase im
     _focused: boolean;
     // (undocumented)
     protected _focusMonitor: FocusMonitor;
+    get hideIcon(): boolean;
+    set hideIcon(value: BooleanInput);
     id: string;
     get inputId(): string;
     labelPosition: 'before' | 'after';
@@ -102,7 +104,7 @@ export abstract class _MatSlideToggleBase<T> extends _MatSlideToggleMixinBase im
     protected _uniqueId: string;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSlideToggleBase<any>, never, never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSlideToggleBase<any>, never, never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatSlideToggleBase<any>, never>;
 }
@@ -120,6 +122,7 @@ export class MatSlideToggleChange {
 export interface MatSlideToggleDefaultOptions {
     color?: ThemePalette;
     disableToggleValue?: boolean;
+    hideIcon?: boolean;
 }
 
 // @public (undocumented)