& lt; object type = "image / svg + xml" data = "images / heart. svg "class =" red heart-icon "& gt; & lt; / object & gt; 

Answer 1, authority 100%

It is probably useful to give an answer to a wider range of icon stylization issues.
There is a very helpful article Styling SVG & lt; use & gt; Content with CSS – translation , – original

To solve your problem, the article section is useful – Cascading styles

From this section, you can conclude that svg internal styles have the highest priority.

& lt; path style = "fill: red; stroke: blue;" d = "M100,100 ... / & gt;"

To eliminate the dominance of the svg’s internal stylesheets, it is necessary: ​​

1. Remove all styling attributes from patches, polygons, etc., all inline styles in the icon code – fill , stroke

2. Add in external stylesheet path {fill: inherit; stroke: inherit; }

3. Styling icons is already done in the style sheet at the level of icon classes

4. In the header of the * .svg files of icons add a line pointing to an external style sheet

   & lt;? xml-stylesheet type = "text / css" href = "style.css"? & gt;

5. The stylesheet file and SVG files are best placed in the same folder as browsers are more sensitive to this than others chrome

Update

Add an icon sprite to HTML

& lt; object type = "image / svg + xml" data = "images / external-link-symbol.svg" class = "icon-after" & gt; & lt; / object & gt;

call the icon from the sprite by its id using the command & lt; use & gt;

& lt; div & gt;
& lt; svg version = "1.1" id = "Capa_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
   viewBox = "0 0 511.626 511.627" class = "icon readmore-icon light-gray" xml: space = "preserve" & gt;
& lt; use xlink: href = "external-link-symbol.svg # idIcon" / & gt;
& lt; / svg & gt;
& lt; / div & gt;

Here’s more details about the nuances of adding and styling an icon from a sprite

Look, try the options, I’m sure you will succeed. As it is done by many who want to achieve results.

Answer 2, authority 33%

Reply # 3

Reply to comments

These are exactly the icons that were before me) They said to change to
design) And design is just a picture in the format
SVG and no manipulation of it can be done

Hover written in the same way does not work

Styling images in image / png format; base64 on hover

Imagine
such a situation – the designer drew a very beautiful picture, logo, etc. Fulfilled your request for vector format.
But, I drew it in a raster editor and saved it, as it were, a vector, in base64 format.
That is, the raster is embedded in the vector format. Normal styling doesn’t work.
It is difficult for you to redraw in a clean vector.
In this case, you can replace styling with SVG filtering.

Main idea – in the initial state, one filter is applied to the image

& lt; filter id = "WhiteFilter" x = "- 20" y = "- 20" width = "150" height = "150" & gt;
    & lt; feColorMatrix in = "SourceGraphic" type = "matrix"
        values ​​= "0 0 0 1 0
            0 0 0 1 0
            0 0 0 1 0
            0 0 0 1 0
        "/ & gt;
  & lt; / filter & gt;

And on hover, other color filters are applied id = "RedFilter" , id = "GreenFilter"

Answer 3, authority 33%

Reply # 2

To quickly solve problems with styling icons.
This technique is suitable if you need to quickly add icons to your project that can be colored in any color from an external CSS file.
Moreover, the icons are of high quality, almost a complete set for all occasions.
Icons are responsive and do not lose quality when scaling, since these are SVG icons that make up a character font – Google Material Icons

Font connection:

& lt; link href = "https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" & gt;

You can select icons by name here

Select the desired icon with the name – favorite

Connecting an icon to an HTML page:

& lt; i class = "material-icons red" & gt; favorite & lt; / i & gt; , where

material-icons – common class for all icons
red – an additional class that sets the color of the icon

Below is an example with three identical icons painted in different colors
Added animation of increasing icons when hover .

. material-icons {
transform: scale (2);
}
i {
 margin: 100px 50px 50px 80px;
 transition: transform 1s ease-in-out;
}
i: hover {
 transform: scale (10);
}
.red {color: red}
.green {color: yellowgreen}
.blue {color: dodgerblue} 

& lt; link href = "https://fonts.googleapis.com/icon?family = Material + Icons "
   rel = "stylesheet" & gt;
& lt; i class = "material-icons red" & gt; favorite & lt; / i & gt;
& lt; i class = "material-icons green" & gt; favorite & lt; / i & gt;
& lt; i class = "material-icons blue" & gt; backup & lt; / i & gt;