Custom SVG icons not working in callouts

[Cricket742]

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>';
}

[ariehen]

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.

[Cricket742]

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

[tophee]

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

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

[ariehen]

@Cricket742

Does this qualify as a bug?

@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.

[m-j-r]

I’ve managed to get this working on Obsidian version: v1.4.14, Installer version: v1.3.5 by updating my snippet. Not pretty, but is easier than downgrading (imho).

Here’s my CSS snippet:

/* 'normal' config */
.callout[data-callout="spellcheck"] {
    --callout-color: var(--callout-summary);
}

/* Hide the default image */
.callout[data-callout="spellcheck"] div.callout-title div.callout-icon svg {
	display: none;
}

/* Show my image instead */
.callout[data-callout="spellcheck"] div.callout-title div.callout-icon::after {
	content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNwZWxsLWNoZWNrIj48cGF0aCBkPSJtNiAxNiA2LTEyIDYgMTIiLz48cGF0aCBkPSJNOCAxMmg4Ii8+PHBhdGggZD0ibTE2IDIwIDIgMiA0LTQiLz48L3N2Zz4=");
}

This will most likely continue to work after the bug is fixed too, but ymmv.

Matt

[ariehen]

They are working again (v1.4.14, v1.4.14 installer).