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)?
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");}