Callout - Broken Custom CSS SVG icon - Please Help

I am trying to customize my callout icons following this official doc

Here is my source SVG

My Custom CSS file

But the icon looks broken like this.
Screenshot 2023-01-29 at 12.50.21 PM

I’ve tried other SVGs but they all look fully filled like this.
I am not using any fancy themes or plugins.
I am using the default Obsidian theme.

Can anyone please let me know what I am doing wrong here?
Thanks in advance!

I have not tried modifying icons with custom SVGs so I can’t say for sure. But if you remove --callout-icon: icon-id; that may help.

That format is for defining internally supported lucide icons as the callout icon.

1 Like

I take that back; I just realized that the screenshot that you posted of your source svg IS a lucide icon. Try this:

.callout[data-callout="email"] {
    --callout-color: 72, 135, 149;
    --callout-icon: lucide-mail;

:man_bowing: :partying_face: Wow Thank you so much @ladyMonolid! That worked perfectly. Thanks again for taking a look. :pray:

Screenshot 2023-01-29 at 1.27.25 PM

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.