diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 013f1e385bc..877a01b3456 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -20,6 +20,15 @@
 .input-clear-icon {
   @include svg-background-image($input-ios-input-clear-icon-svg);
 
+  @supports (mask-image: url()) {
+    @include svg-mask-image($input-ios-input-clear-icon-svg);
+    background-color: $input-ios-input-clear-icon-color;
+    background-image: none;
+    mask-size: $input-ios-input-clear-icon-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
   width: $input-ios-input-clear-icon-width;
   height: $input-ios-input-clear-icon-width;
 
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 51bc9ce6cb1..a2abb131319 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -1,7 +1,6 @@
 @import "./input";
 @import "./input.md.vars";
 
-
 // Material Design Input
 // --------------------------------------------------
 
@@ -24,6 +23,15 @@
 .input-clear-icon {
   @include svg-background-image($input-md-input-clear-icon-svg);
 
+  @supports (mask-image: url()) {
+    @include svg-mask-image($input-md-input-clear-icon-svg);
+    background-color: $input-md-input-clear-icon-color;
+    background-image: none;
+    mask-size: $input-md-input-clear-icon-size;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
   width: $input-md-input-clear-icon-width;
   height: $input-md-input-clear-icon-width;
 
diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html
index 2f63b0b96b1..8c2b03a74ac 100644
--- a/core/src/components/input/test/basic/index.html
+++ b/core/src/components/input/test/basic/index.html
@@ -57,6 +57,15 @@
             ></ion-input>
           </ion-item>
 
+          <ion-item>
+            <ion-label>Colored Clear Input</ion-label>
+            <ion-input
+              clear-input
+              value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"
+              style="--ion-color-step-600: var(--ion-color-primary, #3880ff)"
+            ></ion-input>
+          </ion-item>
+
           <ion-item color="dark">
             <ion-label position="floating">Floating</ion-label>
             <ion-input checked></ion-input>
diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss
index e074d191746..b7a578c6f90 100644
--- a/core/src/themes/ionic.mixins.scss
+++ b/core/src/themes/ionic.mixins.scss
@@ -206,16 +206,17 @@
 }
 
 
-// SVG Background Image Mixin
+// SVG Image Mixin
+// @param {string} $property
 // @param {string} $svg
 // ----------------------------------------------------------
-@mixin svg-background-image($svg, $flip-rtl: false) {
+@mixin svg-property-value($property, $svg, $flip-rtl: false) {
   $url: url-encode($svg);
   $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
 
   @if $flip-rtl != true or $viewBox == null {
     @include multi-dir() {
-      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+      #{$property}: url("data:image/svg+xml;charset=utf-8,#{$url}");
     }
   } @else {
     $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
@@ -225,15 +226,29 @@
     $flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
     $flipped-url: url-encode($flipped-url);
 
-    @include ltr () {
-      background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+    @include ltr() {
+      #{$property}: url("data:image/svg+xml;charset=utf-8,#{$url}");
     }
     @include rtl() {
-      background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
+      #{$property}: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
     }
   }
 }
 
+// SVG Background Image Mixin
+// @param {string} $svg
+// ----------------------------------------------------------
+@mixin svg-background-image($svg, $flip-rtl: false) {
+  @include svg-property-value(background-image, $svg, $flip-rtl);
+}
+
+// SVG Mask Image Mixin
+// @param {string} $svg
+// ----------------------------------------------------------
+@mixin svg-mask-image($svg, $flip-rtl: false) {
+  @include svg-property-value(mask-image, $svg, $flip-rtl);
+}
+
 // Add property horizontal
 // @param {string} $start
 // @param {string} $end