Custom callout icons or custom title

Having ascertained that what is reported here is not yet solved, couldn’t you create a css that hides the icon but adds text at the beginning of the title, so that if for example it is an emoji it will be the emoji that will be shown. Increasing the possibilities.

Steps to reproduce

Add this in a note

> [!custom] Title
> Contents

make a css

.callout[data-callout="custom"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-alert-circle;

like Callouts - Obsidian Help

Did you follow the troubleshooting guide? Y

Expected result

Red color and custom icon

Actual result

Red color but random icon… usually circled exclamation point but also others


Obsidian version: v1.6.5
Installer version: v1.4.16
Operating system: Windows 10 Education
Login status: not logged in
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 1
Restricted mode: off
Plugins installed: 5
Plugins enabled: 0

Additional information

I also tried other ways such as using the .title .icon :before selector but without good results.
So this is both a bug report and a request for help.
Sorry I didn’t memorize everything

it works fine for me, 0,0,0 is black not red.
lucide-alert-circle; is the circled exclamation point.

Moved this thread to css section

Sorry, I copied the original css and not the modified one
And I get red.

However, by searching lucide-alert-circle on lucide I get “No icons found for ‘lucide-alert-circle’”.

I would like to add “flame,” and obviously make it red, but I can’t really get flame: I get random shapes.

.callout[data-callout="custom"] {
    --callout-color: 255, 0, 0;
    --callout-icon: flare;

don’t work: I get random shape.

That’s reason I had thought, I hope I explained myself correctly, that I could hide the icon, which I couldn’t do, and add at the begin of the title the emoji :fire:. That would be an even better solution, perhaps.

So, writing

[!custom] Title

I (hope) get

:fire: Title

(well, in red)

Using a css like

.callout[data-callout="custom"] {
    --callout: 255, 0, 0; // back and fore color
    --callout-icon: hide;
    --title::before: 🔥

I made various attempts, such as

.callout[data-callout=“custom”] > icon

but none worked as well as I would like