Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 (cordova-lib@8.1.1)
   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