Using Lucide icons in CSS

Help
1

What I’m trying to do

I’d like to add icons from Lucide in front of folders or files in the sidebar File Explorer but can’t figure out how to do that. I can add emoji using the code below but can’t figure out how to point it at Lucide icons instead:

/*.nav-folder .nav-folder-title-content:before {
  content: "\1F4C2";
  padding-right: 8px;
}*/

.nav-folder .nav-folder-title-content:before {
  --folder-icon: "\folder";
  padding-right: 8px;
}

Things I have tried

Tinkering with variations of the above, but to no avail.

2

Hmm, I stumbled over the same issues, 2 years ago or so. Lucide icons weren’t available in CSS, then. I wrote a snippet to add icons as base46 to my file tree.

At the time I had no choice, but now you can find some community plugins to add icons to folders and files on-the-fly; I use Iconic

3

Yeah, I was able to do it with base64 data URLs of Lucide icons as well, but I was hoping there were ways to just reference the icons directly, like can be easily done for custom callout CSS. I’m not sure why they seem to only be usable in callouts, but it’s a disappointing limitation.

4

logical points, indeed a bit disappointing. Right, only callouts accept lucide icons, I didn’t ever understand why.
There was some older thread to discuss this limitation, with no solution. I can’t remember anymore how the thread was called, maybe you could ask for news there if the thread is still open/not locked.