diff --git a/packages/mdc-icon-toggle/mdc-icon-toggle.scss b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
index 0dd2316ec2a..0f1f400d6a4 100644
--- a/packages/mdc-icon-toggle/mdc-icon-toggle.scss
+++ b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
@@ -22,7 +22,7 @@
 
 .mdc-icon-toggle {
   @include mdc-theme-prop(color, text-secondary-on-light);
-  @include mdc-ripple-base;
+  @include mdc-ripple-surface;
   // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
   // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
   // we need to use an opacity value such that when two elements of the same color and opacity are
@@ -38,12 +38,11 @@
   // We simply solve this quadratic equation for the nonnegative root between [0, 1].
   // E.g. for black 12% opacity:
   // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
-  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
-  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
+  @include mdc-ripple-color(black, .062);
+  @include mdc-ripple-radius;
 
   @include mdc-theme-dark(".mdc-icon-toggle", true) {
-    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
-    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+    @include mdc-ripple-color(white, .16);
   }
 
   display: flex;
@@ -76,14 +75,12 @@
 
 .mdc-icon-toggle--primary {
   @include mdc-theme-prop(color, primary);
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+  @include mdc-ripple-color(primary, .14);
 }
 
 .mdc-icon-toggle--accent {
   @include mdc-theme-prop(color, secondary);
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .14));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .14));
+  @include mdc-ripple-color(secondary, .14);
 }
 
 .mdc-icon-toggle--disabled {