can you override Jquery mobile stock icons in both white and black without html changes?

Question

i want to override the default icons without needing custom HTML markup like data-icon. Basically, i should be able to just override the CSS of the default set.

I've tried this...

.ui-icon-delete:after {background-image:url("../img/assets/icon-close.svg");}
.ui-nosvg .ui-icon-delete:after {background-image: url("../img/assets/icon-close.png");}

But this does not work for icons in both color formats. I also do not want to override the actual images in theme-roller's icons-png and icons-svg folder.

What is the complete CSS for overriding all states of a default jquery mobile icon (with and without the disc background color)?

Answer 1

Your code replaces the white version of ui-icon-delete. To also replace the black version, use something like this:

.ui-alt-icon.ui-icon-delete:after,
.ui-alt-icon .ui-icon-delete:after {background-image:url("../img/assets/icon-close-black.svg");}