bug: clearInput icon should be rendered as an ion-icon for easier styling

[lordcoste]

Bug Report

Ionic version:

[x] 4.0.0-rc.1

Current behavior:
I can't change the color of the clearInput button inside the ion-input (not searchbar).
Probably because the svg is rendered as:

background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='var(--ion-color-step-600,%20%23666666)'%20d='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%20M352,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'/>

The relevant part is var(--ion-color-step-600,%20%23666666): no matter if I override the --ion-color-step-600 variable, it's always rendered as a dark grey.

Expected behavior:
It should reflect the color of --ion-color-step-600

Steps to reproduce:
<ion-input type="email" placeholder="Email" clearInput></ion-input>

ion-input { --ion-color-step-600: #ffffff; }

Other information:
Also can't understand why the svg use --ion-color-step-600 when in the code --ion-color-step-400 is used:

https://github.com/ionic-team/ionic/blob/a30f760d9292b857033247d4cd1581d3bf40d5db/core/src/components/input/input.md.vars.scss#L26

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.12.1
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/lordcoste/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[paulstelzer]

Thanks for the issue! You are right, at the moment it's not a nice implementation.

[SidiBecker]

This bug is fixed?

[Snowbases]

This does the trick, put in global.css, but I didn't recommend this method.

.input-clear-icon.sc-ion-input-md,
.input-clear-icon.sc-ion-input-ios  {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='white' 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>") !important;
  width: 30px;
  height: 30px;
  background-size: 22px;
}

[SidiBecker]

This does the trick, put in global.css, but I didn't recommend this method.

.input-clear-icon.sc-ion-input-md,
.input-clear-icon.sc-ion-input-ios  {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='white' 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>") !important;
  width: 30px;
  height: 30px;
  background-size: 22px;
}

YEAH! I forgot to talk here, I did it like you did.

But instead of using fill='white' i used %23[HEXCOLOR] (encode of #[HEXCOLOR]). Example: fill='%23858585'

[liamdebeasi]

Thanks for the issue. This has been resolved via #26354, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.