Changing callout icon without changing the color?

[lucasqueiroz]

Hey all, I want to customize my callout’s icon, but I want to have the same colors as other callouts, and since themes change the callout colors, I wanted to “inherit” the colors from another callout type. Is it possible?
For example, I want to have an info callout (same colors as info in any theme I use), but with a phone icon.

Also, is there an easier way than using custom CSS snippets? I like the way admonitions define icon and type, this could be a good addition to Obsidian.

Thanks!

[ariehen]

You can use callout metadata for something like this to add the phone icon to any callout. e.g.

.callout[data-callout-metadata="phone"] {
    --callout-icon: lucide-phone;
}

Written as:

> [!info|phone] 
> Contents

> [!warning|phone] 
> Contents

[lucasqueiroz]

Thanks, that’s exactly what I was looking for!
I believe this is missing from the docs, couldn’t find this anywhere.

Thank you!

[CawlinTeffid]

@lucasqueiroz

I believe this is missing from the docs, couldn’t find this anywhere

https://help.obsidian.md/callouts#Customize+callouts

[lucasqueiroz]

The customization section or the entire doc about callouts doesn’t include anything about metadatas