fix(input): clear icon can be styled (#26354)

resolves #19178, resolves #17168

Co-authored-by: Mathieu-COSYNS <[email protected]>

core/src/components/input/input.ios.scss

@@ -17,11 +17,7 @@
   --padding-start: 0px;
 }
 
-.input-clear-icon {
-  @include svg-background-image($input-ios-input-clear-icon-svg);
-
-  width: $input-ios-input-clear-icon-width;
-  height: $input-ios-input-clear-icon-width;
-
-  background-size: $input-ios-input-clear-icon-size;
+.input-clear-icon ion-icon {
+  width: 18px;
+  height: 18px;
 }

core/src/components/input/input.ios.vars.scss

@@ -49,15 +49,6 @@ $input-ios-inset-margin-start:            0 !default;
 /// @prop - Width of the icon used to clear the input
 $input-ios-input-clear-icon-width:        30px !default;
 
-/// @prop - Color of the icon used to clear the input
-$input-ios-input-clear-icon-color:        $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-ios-input-clear-icon-svg:          "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-ios-input-clear-icon-size:         18px !default;
-
 /// @prop - Padding end of the input with clear input
 $input-ios-input-clear-padding-end:       ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default;
 

core/src/components/input/input.md.scss

@@ -21,11 +21,7 @@
   --padding-start: 0;
 }
 
-.input-clear-icon {
-  @include svg-background-image($input-md-input-clear-icon-svg);
-
-  width: $input-md-input-clear-icon-width;
-  height: $input-md-input-clear-icon-width;
-
-  background-size: $input-md-input-clear-icon-size;
+.input-clear-icon ion-icon {
+  width: 22px;
+  height: 22px;
 }

core/src/components/input/input.md.vars.scss

@@ -22,15 +22,6 @@ $input-md-padding-start:                   ($item-md-padding-start * 0.5) !defau
 /// @prop - Width of the icon used to clear the input
 $input-md-input-clear-icon-width:         30px !default;
 
-/// @prop - Color of the icon used to clear the input
-$input-md-input-clear-icon-color:         $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-md-input-clear-icon-svg:           "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-md-input-clear-icon-size:          22px !default;
-
 /// @prop - Placeholder Text color of the input
 $input-md-placeholder-color:              $placeholder-text-color !default;
 

core/src/components/input/input.scss

@@ -143,6 +143,14 @@
   @include padding(0);
   @include background-position(center);
 
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 30px;
+  height: 30px;
+
   border: 0;
 
   outline: none;
@@ -154,6 +162,10 @@
   appearance: none;
 }
 
+.input-clear-icon ion-icon {
+  color: $text-color-step-400;
+}
+
 /**
  * Normally, we would not want to use :focus
  * here because that would mean tapping the button

core/src/components/input/input.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { closeCircle, closeSharp } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -499,7 +500,9 @@ export class Input implements ComponentInterface {
               ev.preventDefault();
             }}
             onClick={this.clearTextInput}
-          />
+          >
+            <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
+          </button>
         )}
       </Host>
     );