I have created a few custom callouts with SVG icons defined. They were showing up the other day, but no longer. I did just re-download Obsidian, but I was previously up-to-date.
Current version: 1.4.9(Installer version: v1.4.5)
I tested updated some of my icons to a ‘lucid’ icon, but they still do not appear. The issue persists across multiple themes and in the ‘Default’ theme.
I would suspect a small typo in one of your CSS snippets, which renders other parts inactive.
To find these there are a few options:
if using some version tracking on this files, try going back to where it starts working again and then look at what you added after that
try an online css linter to check for errors
have a custom CSS line which triggers something very visible, and move it section by section from the top until it doesn’t apply any more
divide and conquer the file by commenting/ editing or various parts until you find the offending section
Note that searching for bugs/issues in CSS files can be a little tricky due to reload issues, as well as the issue you’re looking for. Due to this I often tend to keep switching the background color of some element, just to make sure that my other changes are also picked up.
Unfortunately I’ve gone through the process of disabling my theme, all other snippets, and all plugins. The problem persists. The same snippets worked just the other day. The only thing I’ve done that could possibly alter my configuration in some way is reinstall Obsidian. It’s weird.
Maybe a useful bit of info…
I overrode the ‘todo’ callout in my snippets, attempting to give it a custom icon, and the icon disappeared as well.
I can’t check the first set (svg is clipped) but “meeze” and “reminder” are working for me with some alteration. Yes, it seems a typo. Try lucide- and no quotes.
Remember to close/open the note or Reload app without saving after making callout icon changes. It’s one of the few instances where the CSS isn’t picked up immediately.
In my original code block I had both an icon point to a lucid string with, and another without, quotes. Neither worked. But, now that you’ve suggested it… it works.
I did run into issues getting the ‘lucid-coffee’ icon to show up, but it eventually started showing up after I swapped a different icon in and then swapped it back. Maybe it was a loading issue that just needed a little encouragement, or Obsidian hadn’t had enough coffee.
I mentioned, but be sure to close/open the note or reload Obsidian when changing callout icons. I always forget as I’m used to hitting save in my code editor and have the CSS take right away.
I’ve attempted all debugging steps and ruled out any issues with custom CSS. The actual problem lies in the fact that the SVG icons are not rendering at all.
Typically, there should be an svg.svg-icon element within the div.callout-icon :
I’m curious whether you’re actually able to use <svg ...> directly there at all? Aren’t you supposed to refer to already predefined icons using the --callout-icon tag?
In some of my CSS related to custom checkboxes, I need to set the background in order to use custom svg. Do note that is related to task checkboxes, and not icons related to callouts.
@jerrymk In your case, scroll-text is from Lucide v0.205.0. As far as I know, Obsidian’s latest icons available are from Lucide v0.114.0. See → Obsidian Change log.
There is a lot of confusion over this; I’ll submit a request to the help documentation callouts section. It should mention that not all icons on the Lucide site are available to use.
Sorry for a little sidetracking here, but unless there is and I haven’t found it, I think it would be really useful to have a help page we could link to showing the version of all included packages, i.e. lucide icons, mermaid, prism.js, mathjax, …
