Custom callout icons or custom title

[AP2023]

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

Environment

SYSTEM INFO:
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

[WhiteNoise]

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

Moved this thread to css section

[AP2023]

Sorry, I copied the original css and not the modified one
255,0,0
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 . That would be an even better solution, perhaps.

So, writing

[!custom] Title
Contents

I (hope) get

Title
Content

(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
.callout[data-callout=“custom”].title
.callout[data-callout=“custom”] > icon
.callout[data-callout=“custom”]::before
.callout[data-callout=“custom”].title::before

but none worked as well as I would like