I’m trying to create a hover effect on the button where the button colour changes as well as the icon. Here is my current setup:
I know how to change the background colour of my button using ‘Hover’, but how do I change the calendar icon on hover? I effectively want to hide the white icon, and display the blue icon on hover (in exactly the same position)
Right now you’re using a background-image on your text class to generate the icon but I’d recommend going a different route. While there are some hacky ways to change the color of bitmap images using CSS filters, the best option is to use the SVG code with the currentColor property.
Using this on your SVGs fill or stroke attribute will tell it to pull the color from the parent element text color instead — meaning that the icon will always match the color of the type.
Instead of an image element, you’re going to use an HTML Embed element. You’ll need to grab the raw SVG code (which you can get by opening your SVG in Notepad or TextEdit) and then change any of the fill="#HEX" or stroke="#HEX" to fill="currentColor" or stroke="currentColor" respectively.
Now copy that code and paste it inside your HTML Embed element and you should have yourself a dynamic SVG icon
Give that a try and don’t hesitate to reach out if you run into any issues (along with your read-only link) and I’d be happy to take a peek.
