Creating an Icon Embed that Changes Color with Press

I’ve cloned a website that uses a icon-embed element to create a custom icon element that changes colors after being pressed. The issue is however, I want to change the icon shape to an alternative and create this same affect among some of the other icons.

I’ve attached a snippet of the icon-embed that is currently functional however the wrong shape. This is the farthest left ‘heart’ seen in my read-only site. I’ve attempted to replicate this with the adjacent icon-embed however it is seen to be blank.

I am pretty new to svg code so definitely have a lot to learn but thought I’d ask the smart ones here first.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Where’s Waldo. Can’t find the heart…

In general the technique is;

  • Embed the SVG code directly in an HTML Embed, not via assets. Your <?xml ... document type exists in a standalone SVG file but not in an inline SVG.
  • Set the fill to currentColor

Then you the SVG will inherit the current CSS color setting. Whatever you do to its container, it will utilize. Not sure what behavior you’re looking for but if e.g. it’s a link, you could have the link Visited state be a different color and get the result you’re looking for. Otherwise if this is something like a favorites button you’re building, you’d likely change the color via javascript.

Apologies, I wasn’t clear enough in my original post. The buttons start on slide 3 which are a little finicky to get to but you can do so in the settings tab and using the arrows. Anywho, interesting about taking the containers color. In the snippet I posted in the original post, that code was in an embed (or so I thought) are you saying that is correct or incorrect? Because there’s currently an SVG element within a custom embed element and its working as expected using the code snipped in my original post.

Thanks for checking it out tho!