Ionic 4 - The clear button of ion-input remains gray

The clear button color of ion-input remains gray.

I opened a issue on GitHub. Click here.

Anybody can help me?

Try put this tag !important in the style!

This sometimes happens because there is some overlapping component!

I put this but the bug continue…

Hello, Don’t just post image only, add your code, html or what you tried?

Hi @gokujy. The informations is here

So you want to set background color red?

I want to set red in clear icon (clearInput)

It’s svg image in clear input icon, if you wish to change color you have to download another svg image and fill color, whatever you want.

1 Like

Thanks @gokujy. It’s working.

hey @SidiBecker can you share exactly how you swapped out the icon without doing it in the global css.

I’ve tried but it keeps being overwritten for me if i don’t do it in the global css

Hy @peyi, I took the original svg and customized only the color. So, I put it in my main.scss file.

Example md and ios: {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=''%20viewBox='0%200%20512%20512'><path%20fill='rgb%28255,255,255%29'%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'/></svg>") !important;
} {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=''%20viewBox='0%200%20512%20512'><polygon%20fill='rgb%28255,255,255%29'%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256'/></svg>") !important;

The color (RGB) I change in this location of svg:

1 Like

So happy you replied thanks Sidi!

Quick one: Does the color only have to be an SVG?

1 Like

You are welcome!

According to my tests, the color must be RGB.