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
Then you the SVG will inherit the current CSS
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!