I installed colorful icons.

[WantToLearnJapanese]

RPReplay_Final1706156512.mov

[rodrigoalexandrecosta]

Can you share how you did it?

[WantToLearnJapanese]

Let me share the clean version on this weekend.

note name: example custom_icons.css attributes:#appCss

/* https://isotropic.co/tool/hex-color-to-css-filter/ */
.hs-filter-red2 {
    filter: invert(17%) sepia(83%) saturate(4009%) hue-rotate(346deg) brightness(107%) contrast(86%);
    background-color: transparent!important;
}
.hs-filter-blue2 {
    filter: invert(61%) sepia(67%) saturate(813%) hue-rotate(177deg) brightness(96%) contrast(94%);
    background-color: transparent!important;
}
.hs-filter-green2 {
    filter: invert(61%) sepia(76%) saturate(6727%) hue-rotate(100deg) brightness(104%) contrast(75%);
    background-color: transparent!important;
}
.hs-filter-pink2 {
    filter: invert(1) grayscale(100%) sepia(300%) hue-rotate(200deg) brightness(80%) saturate(1000%);
    background-color: transparent!important;
}

.hs{
    height:1.0em;
    width:1.0em;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    display:inline-block;
    vertical-align:middle;
    line-height:1;
}

.hs-bg-white{
    background-color: white!important;
    border-radius: 3px;
}

.hs-bg-blue{
    background-color: #8080ff!important;
    border-radius: 3px;
}

.hs-bg-black{
    background-color: #000000!important;
    border-radius: 3px;
}

.hs-invert{
    filter:invert(var(--hs-invert-factor))!important;
    background-color: transparent!important;
}


.hs-filter-red{
    filter: grayscale(100%) sepia(100%) hue-rotate(320deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-blue{
    filter: grayscale(100%) sepia(100%) hue-rotate(160deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-green{
    filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-yellow {
    filter: grayscale(100%) sepia(100%) hue-rotate(20deg) saturate(800%) brightness(500%);
    background-color: transparent!important;
}

.hs-filter-orange {
    filter: grayscale(100%) sepia(100%) hue-rotate(10deg) saturate(800%) brightness(350%);
    background-color: transparent!important;
}

.hs-filter-purple {
    filter: grayscale(100%) sepia(100%) hue-rotate(220deg) saturate(300%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-pink {
    filter: grayscale(100%) sepia(100%) hue-rotate(260deg) saturate(300%) brightness(500%);
    background-color: transparent!important;
}

.launcher-button.hs {
    height:0.1em!important;
    padding: 0.4em 0.4em!important;
    margin:0.0em 0.0em 1.0em 0.0em!important;
}

.note-icon-widget > .note-icon.hs {
    margin-left:0.2em!important;
    margin-top:0.2em!important;
}

.note-book-header > .note-icon.hs {
    margin-right:7px!important;
    margin-bottom:0.4em!important;
}

.note-tab-icon.hs {
    margin-right:7px!important;
}

.hs-7z{background-image:url("/custom/hs/7z.svg");}
.hs-adidas2{background-image:url("/custom/hs/adidas2.svg");}
.hs-adidas{background-image:url("/custom/hs/adidas.svg");}

note name: updates_css_custom_icons.js type: javascript(backend)

async function updateCss(
    customPath,
    iconName,
    cssNote,
    cssClassPrefix
){
    let css = cssNote.getContent();
    
    css += `
.${cssClassPrefix}-${iconName}{background-image:url("/custom/${customPath}");}`;
    cssNote.setContent(css);
}

function getCssAncestor(imgNote) {
    var parentNote = imgNote.getParentNotes()[0];
    while (!parentNote.hasRelation("customClassCss") || !parentNote.hasLabel("customClassPrefix"))
        parentNote = parentNote.getParentNotes()[0];
    return parentNote;
}

async function handleNoteEvent(noteId) {
    const note = api.getNote(noteId);
    const noteTitle = note.title;
    
    if (note.type != "image")
        return;
    
    // console.log("icons-svg-run...", noteId, noteTitle);
    
    const iconName = noteTitle.split(".")[0];
    
    const ancestorNote = getCssAncestor(note);
    const cssNote = ancestorNote.getRelation("customClassCss").getTargetNote();
    const cssClassPrefix = ancestorNote.getLabel("customClassPrefix").value;
    
    const customResourcePath = `${cssClassPrefix}/${noteTitle}`;
    
    note.setLabel("customResourceProvider", customResourcePath);
    note.removeLabel("originalFileName");
    
    await api.runOutsideOfSync(async ()=>{
        updateCss(
            customResourcePath, 
            iconName,
            cssNote,
            cssClassPrefix
        );
    });
}

const originNoteId = api.originEntity?.noteId;
if (originNoteId) {
    handleNoteEvent(originNoteId);
} else {
    console.log("No originating note found");
}

note name: images type:anything is fine attributes:#child:archived #child:child:archived #sorted(inheritable) #customClassPrefix=hs ~runOnChildNoteCreation(inheritable)=[updates_css_custom_icons.js] ~customClassCss=[custom_icons.css]

How to use it

1. Set three notes as guided. Note that for images note you should manually set relations to according notes.
2. In images note, import images as subnotes by imort files. You can make non image subnotes under images note. before you import, set appropriate name for images files not to include whitespaces.
3. Now you can set custom note icons by setting the label likes #iconClass="hs hs-adidas". You should refresh Trilium to load CSS

[Nriver]

It looks great!