Custom Icons in Hierarchy Tree

[Tymander]

Howdy all, I'm not super great at coding and have been attempting to use custom svg icons for some of my notes but cannot find out how to solve this. I have an svg and a github repo with it chillin in there. I keep playing with the #appCss #cssClass and #iconClass tags but have been unsuccessful so far.

I just need some kind of more in-depth tutorial for how I get from svg in github repo to a usable icon in Trilium Notes.

[rodrigoalexandrecosta]

Howdy,

I don't really know if the following link that I'll show you uses svg ou png, but the process that I use is this:

• create a new CSS note
• I use as reference this site
• this is the direct link for their CSS file
• copy paste the contents of the CSS file into your CSS note
• label the note with #appCss
• use the class/name of the emoji (for instance, ec-joy) in the #iconClass label of the note you want to change, for instance #iconClass=ec-joy
• you can play with the icon sizes using both, for instance, ec-joy and "ec ec-joy"

I used the above site as reference but the same process (I think) can be applied for other sources, like this one with a huge list of emojis. Unfortunately I don't really know how this may apply or differentiate from png and svg icons.
Hope it helps.

[Tymander]

Awesome, thanks for responding.

I have made sure to update my installation of Trilium Notes, and I am unable to get the emojis to work (let alone custom icons). I made sure to create a new css note, copy/paste the script from the link, and labeled it w #appCss.

When I give another node a label of #iconClass=ec-joy or #iconClass="ec ec-joy" it merely removes the icon it had - leaving it blank. So I'm not sure what I'm doing wrong, but now I need to solve this before attempting to create custom ones.

Any idea of something I may be doing wrong?

Thanks in advance for any help you can provide.

[b-jordanov]

It works out of the box with the default themes. However when I tried to make it work with catpuccin I experienced the same behaviour as you did. it seems the problem comes only when I use catpuccin styles. I'm still trying to figure out why. I'm literally using Trillium for the last hour or so, so hopefully I'll figure it out soon.

[b-jordanov]

Yep, I caught it!
In my case the problem was with the property "background: none;" for span.fancytree-custom-icon
I just commented that out and voilà!

/*
span.fancytree-custom-icon {
  color: var(--scrollbar-border-color);
  background: none;
}
*/