Как при помощи jQuery поменять контент у псевдоэлемента ::before?
А не проще ли попробовать такой подход:
в css прописать#icon:before {
    ...
}
#icon.second:before {
    .....
}
и менять у #icon класс на js?
Решением послужило добавление нового span-а, в котором через css была прописана вторая картинка. Через jQuery просто меняется css-свойство "opacity" каждого из span-ов.<span id="icon-1"></span>
<span id="icon-2"></span>#icon-1 {
	opacity: 1.0;
}
#icon-2 {
	opacity: 0.0;
}
#icon-1::before {
    content: url("../image/search-dark.svg");
}
#icon-2::before {
    content: url("../image/search-light.svg");
}$('#icon-1').animate({'opacity':'0.0'},400);
$('#icon-2').animate({'opacity':'1.0'},400);