Since version 1.4, JQuery Mobile provides an SVG-based icon set for high-quality scalable icons.
Out-of-the-box, the icons are provided in two different color schemes: default (white) and alt-icon (black).
To give your user interface an individual style, you might want to change the color to something more specific such as green, black or a specific rgb color.
Using CSS to change the font color of your button or link containing the icon will not work, as the jQuery Mobile svg icons are realized as background images.
The solution to change the icons color, is to modify the svg image realizing the icon itself.
To do so, open jquery mobiles stylesheet (e.g. “jquery.mobile.inline-svg-1.4.1.min.css”) and find the definition of the icon you would like to change (e.g. .ui-icon-delete:after)
The styles are always defined as “.ui-icon-
To change the color, you do not need to understand the full encoded svg data url. You just need to know that shapes in an SVG are defined by polygones. In the example below, search for the string “polygon%20fill%3D%22%23FFF”:
.ui-icon-delete:after{
background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
“polygon%20fill%3D%22%23FFF“ stands for a polygon filled with the color white (FFF).
So to define your custom icon with a different color, copy the style definition into your own css stylesheet file and replace “FFF” with your prefered hex color definition.
Note: You should not modify the original jquery mobile file. Otherwise your modifications could be overridden with the next update.