diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.html b/src/material-experimental/mdc-slide-toggle/slide-toggle.html
index d99596f79a4e..778e6e02a501 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.html
+++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.html
@@ -7,7 +7,6 @@
         [matRippleTrigger]="switch"
         [matRippleDisabled]="disableRipple || disabled"
         [matRippleCentered]="true"
-        [matRippleRadius]="24"
         [matRippleAnimation]="_rippleAnimation"></div>
       <div class="mdc-switch__thumb">
           <input #input class="mdc-switch__native-control" type="checkbox"
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
index 6c2eda116902..3dbc43e773ac 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
+++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -48,6 +48,10 @@
     opacity: map-get($mdc-ripple-dark-ink-opacities, press);
   }
 
+  .mat-ripple {
+    border-radius: 50%;
+  }
+
   // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
   // TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
   //  conditionally add them. Consider the size cost when deciding whether to switch.