Adding a dollar sign to an ion-input


I currently have this:
< ion-item >
< ion-label sale floating>Sale Price< /ion-label >
< ion-input type=“number” clearInput placeholder="$">< /ion-input >
< /ion-item >

What I’d really like, is to add a $ to the front of any input so that when a user types in a number it appears with a dollar sign next to, or inside it. I’m finding this impossible currently. In a standard input I’d put the before or in a span or label preceding the input in order to make it work.

However with the Ion-item in an Ion-list it seems that adding a span breaks it, and I’m not sure how, using scss, to add it after. Head exploding stuff.

I’ve tried:
ion-label[sale]:before {
content: “$”;
On a whim, in hopes that would work. It does not.

Anyone experience this before and have a solution?


I’m interested in the same thing. Any solutions?

Any luck with this: