Fading icon image

[admin]

One option is to use hue-rotate animation which will recolor your icon. In this case you need to use the same icon for both on/off state (red for this example). Set additional class to recolor

Custom CSS:

Code:

.recolor  {
  transition: filter 3s;
}
.recolor.on {
  filter: hue-rotate(-120deg);
}

Custom JS:

Code:

$(function() {
  $('.recolor').each(function(_, el) {
    var $el = $(el), addr = $el.data('object');
    
    if (addr) {
      grp.listen(addr, function(obj) {
        $el.toggleClass('on', obj.value);
      });
    }
  });
});