How to put an svg image in an input that will change color when the input gets focus?

Question

SVG

I want to implement the following form for sending a message:

But I can't make it so that when the input receives focus, the stroke color of the icon inside the input changes.

Answer 1

How to put an svg image in an input that will change color when the input gets focus?
In order for SVG to be accessible from CSS:
1) it must be inserted into an HTML file directly in the form of source code
2) either by connecting using <use>, after first taking the source code of the SVG icon into a separate file (for example, an SVG sprite), placing it inside and giving it an ID so that you can call the desired code
Example on CodePen with a demonstration and additional explanations with comments in the HTML code
https://codepen.io/hisbvdis/pen/MWYyGvW

Answer 2

Make two different pictures or make the part that needs to be changed transparent and everything else white - then you can just change the background.