1. Respuesta directa a tu pregunta
Si te interesa jugar con los filtros, se puede, aunque te recomiendo el 2do método (abajo).
Para cambiar la matiz de colores usando filtros, es una buena idea partir de un color sólido. Por ejemplo, utilicemos el rojo al 100% como imagen original.
Estamos acostumbrados a manejarnos con RGB pero, para los filtros, tenemos que movernos en HSL (matiz, saturación, luminosidad). Por ejemplo:
- Rojo:
HSL( 0°, 100%, 50%)
- Verde:
HSL( 120°, 100%, 50%)
Y para las propiedades CSS filter
y backdrop-filter
, se usan las funciones hue-rotate(), saturate() y brightness() respectivamente.
Código
Para cambiar del rojo al verde, sólo es necesario rotar el ángulo de la matiz de color 120°.
filter: hue-rotate(120deg);
Otro ejemplo, para el amarillo tenemos que modificar matiz y luminosidad.
filter: hue-rotate(60deg) brightness(500%);
Para otros colores, recomendaría que usen herramientas online como http://www.rapidtables.com/convert/color/rgb-to-hsl.htm (o la que prefieras).
.verde {
filter: hue-rotate(120deg);
}
.amarillo {
filter: hue-rotate(60deg) brightness(500%);
}
html {
width: 800px;
}
<img title="Original rojo"
class="iconos"
src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro verde"
class="verde"
src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
<img title="Con filtro marillo"
class="amarillo"
src="https://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png"
>
2. Una clase para definir el color
Como mencionaste en tu pregunta, se puede cambiar el color de todos los iconos obteniendo el recurso desde:
https://download.jqueryui.com/themeroller/images/ui-icons_<<<color>>>_256x240.png
Por ejemplo para un verde al 100%
https://download.jqueryui.com/themeroller/images/ui-icons_00ff00_256x240.png
Y esto podemos establecerlo en una clase, que sólo se aplique a los iconos que quieras.
Código
Definimos la clase .verde
, y sólo la aplicamos en el segundo caso:
.ui-icon.verde {
background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_00a000_256x240.png);
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery UI -->
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- body -->
<div>
<span class="ui-icon ui-icon-circle-check"></span>
<span class="text">ui-icon-circle-check</span>
</div>
<div>
<!-- 2do caso, con clase "verde" -->
<span class="ui-icon ui-icon-circle-check verde"></span>
<span class="text">ui-icon-circle-check verde</span>
</div>
Preferiría hacerlo de este modo, y cargar 1 sola imagen extra de 4.4KB, antes que estar aplicando un filtro sobre cada icono, dependiendo en la renderización del lado del cliente. Los filtros son extremadamente costosos. Opino que es mejor ya tener calculado el color como imagen disponible en tu server.