How to change svg color on Hover

Question

every one , i am using angular and i have a svg , html like :

this is the svg source code filter_default:

I want to know how can i change the svg color when mouse hover , thanks all of your help！

user_15160601 · Answer

#Path_7587 .cls-2 {
  fill:#707070;
}
#Path_7587 .cls-2:hover {
  fill: red;
}

user_10756489 · Answer

Similar to the first answer, with one correction. The right class to modify is cls-2:

.cls-2:hover {
  fill:red;
}

user_10190250 · Answer

thanks all of your help , i try ng-deep and now work fine

rename the class name in svg from cls-2 to floatTextIcon
in the scss file add such code

:host ::ng-deep .floatTextIcon:hover { fill: #3a464d; }

user_10756489 · Answer

Changing the icon color when hovering a button:

button .cls-2 {
  fill: #888;
}

button:hover .cls-2 {
  fill: blue;
}

button {
  width: 50px;
  height: 50px;
}

button .cls-2 {
  fill: #888;
}

button:hover .cls-2 {
  fill: blue;
}