How to change color of svg icon, fill is specified in tag?

Question

SVG

Can you please tell me how to change the color of such an svg icon on hover using css.
Inserted into the page as follows:

<object  type="image/svg+xml" data="img/icon.svg">
      <img  src="img/icon.svg">
</object>

tried this in CSS - doesn't work:
svg #mygca:hover{
fill: red;
}
The icon itself:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49" height="49" viewBox="0 0 49 49"><defs><path id="mygca" d="M534.668 1123.717l-14.266 14.268-32.868 14.478 14.477-32.872 14.268-14.264a1.589 1.589 0 1 1 2.248 2.248l-13.844 13.847-8.576 19.466 2.999 2.999 19.467-8.573 13.847-13.844a1.587 1.587 0 0 1 2.248 0c.621.62.621 1.63 0 2.247zm-20.173 6.5l13.332-13.332a1.585 1.585 0 0 1 2.25 0c.623.62.623 1.625 0 2.249l-13.332 13.332a1.594 1.594 0 0 1-2.25 0 1.593 1.593 0 0 1 0-2.25zm-3.48-3.482l13.333-13.332a1.59 1.59 0 1 1 2.25 2.25l-13.333 13.332a1.592 1.592 0 0 1-2.25-2.25zm-3.48-3.482l13.332-13.33a1.586 1.586 0 0 1 2.25 0c.622.619.622 1.624 0 2.25l-13.333 13.33c-.31.31-.719.465-1.125.465s-.814-.155-1.125-.466a1.591 1.591 0 0 1 0-2.249z"/></defs><g><g transform="translate(-487 -1104)"><use xlink:href="#mygca"/><use fill="#555" xlink:href="#mygca"/></g></g></svg>

Thanks in advance

Answer 1

using filter https://blog.union.io/code/2017/08/10/img-svg-fill/
And look for an online generator of the desired filter. The picture itself must be black.