Custom SVG icons not working in callouts

What I’m trying to do

Make a callout with a ‘custom’ svg (it’s just a lucide icon that obsidian doesn’t have natively)

Things I have tried

I used the svg format to add the icon, but it stopped working today when I updated obsidian.

Here’s the code:

.callout[data-callout="chirp"] {
    --callout-color: 205, 155, 255;
    --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rabbit"><path d="M20 8.54V4a2 2 0 1 0-4 0v3"/><path d="M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1.93 1.93 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1c-1.7 0-3 1.3-3 3"/><path d="M7.61 12.53a3 3 0 1 0-1.6 4.3"/><path d="M13 16a3 3 0 0 1 2.24 5"/><path d="M18 12h.01"/></svg>';
}
1 Like

I was trying this the other day and it wasn’t working so gave up.

After some spelunking with the Discord gang, it looks like the v1.4.5 installer (Electron version?) broke something. The v1.3.7 installer seems alright.

Yeah I figured it had something to do with the update. Thanks for the extra info though. Does this qualify as a bug?

So custom-svg callouts are broken in the current v1.4.13? Thanks for mentioning this here! I just sat for over an hour trying to figure out what I was doing wrong :roll_eyes:

To revert to v1.3.7, can I just install it over the newer version or will that just mess things up more?

1 Like

@Cricket742 - Apologies, I missed your follow-up.
Usually custom CSS isn’t considered for bug reports, but as this method is detailed in the help documentation and not working at the moment, I think so.

@tophee You need to turn off auto-updates, but installing the old installer over the new one should be fine. I’d make a backup of my vault(s) for good measure.