Override svg icon data url color
Hi Sir,
I wonder is it possible to override at some point the color of svg icon set in css data url format? I'm not looking for changing original CSS value. Can be dynamically or inline.
I tried many options such as fill but can't get it to work. I think I am doing it wrongly or maybe it is not possible?
When looked into jquery mobile css, one of the svg icon data uri is something like
I wonder is it possible to override at some point the color of svg icon set in css data url format? I'm not looking for changing original CSS value. Can be dynamically or inline.
I tried many options such as fill but can't get it to work. I think I am doing it wrongly or maybe it is not possible?
When looked into jquery mobile css, one of the svg icon data uri is something like
- .ui-icon-action: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%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M9%2C5v3l5-4L9%2C0v3c0%2C0-5%2C0-5%2C7C6%2C5%2C9%2C5%2C9%2C5z%20M11%2C12H2V5h1l2-2H0v11h13V7l-2%2C2V12z%22%2F%3E%3C%2Fsvg%3E");
}
Within the css code, I can manually modify the color value of FFFFFF. But I do not want to apply all of the icon color.
Any suggestions?
Example of HTML codes are:
- <a href="#" class="ui-btn ui-icon-action ui-corner-all ui-btn-inline ui-nodisc-icon ui-btn-icon-notext" style="border:0;">action</a>
Attempt use CSS override but not success:
- .ui-icon-action:hover {
fill: red;
}
- .ui-icon-action:after {
fill: red;
}