jQuery addClass example

Change class name on click in jQuery

HTML

<svg version="1.1" id="search-magnify" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 57 57" style="enable-background:new 0 0 57 57;" xml:space="preserve">
<path class="st4" d="M55.1,51.9L41.6,37.8C45.1,33.6,47,28.4,47,23C47,10.3,36.7,0,24,0S1,10.3,1,23s10.3,23,23,23 c4.8,0,9.3-1.4,13.2-4.2L50.8,56c0.6,0.6,1.3,0.9,2.2,0.9c0.8,0,1.5-0.3,2.1-0.8C56.3,55,56.3,53.1,55.1,51.9z M24,6 c9.4,0,17,7.6,17,17s-7.6,17-17,17S7,32.4,7,23S14.6,6,24,6z">
</path>
</svg>
        
<span class="icon">
 <svg class="icon-svg svg-search" width="20" height="20">
 <use xlink:href="#search-magnify"></use>
 </svg>
</span>

CSS

.icon svg path{
  fill: red;
  color: red;
}