I would like to know how the effect of adding a circle to an icon is achieved, as well as this example within gmail:
I understand that I must use the "focus" event inside the icon; however, I am not sure if it is necessary to create an additional icon (with the circle around it) or simply with css this effect can be achieved.
If it is very easy, stop the effect of when the mouse passes over it would be with 'hover', the focus is where there is a focus of attention through a click or some key. For the circle it is to add a ´padding´ to the icon and give it a ´border-radius´ of 50%. It would look like this:
Assuming you have an image with transparency, you can do the following:
In this example, the background of the image is set to a circle by:
The only thing missing is to change the color of said background when the user puts his mouse over it with:
I added an effect to the background on hover, with the line Transition: background 0.8s;
I modified the colors in plane and hover in my opinion, it looks better, but you can customize it to your style I leave you a link where you can find the color code in hexadecimal (#C4C1C1) or rgb(193,193,193): https:// htmlcolorcodes.com/es/ greetings friends coders, God bless you.