List of icons in Obsidian

List of icons.md

/**
 * List all icons available to `obsidian.setIcon()`
 * 
 * @author Ljavuras <[email protected]>
 */

dv.container.createEl("style", { attr: { scope: "" }, text: `
.icon-table {
    display: flex;
    flex-wrap: wrap;
    margin: 0 var(--size-4-6);
}

.icon-item {
    padding: var(--size-4-2);
    line-height: 0;
    cursor: pointer;
}

.icon-item:hover {
    background-color: var(--background-modifier-active-hover);
    border-radius: var(--radius-s);
}
`});

function renderIconTable(ids) {
    const tableEl = dv.container.createDiv("icon-table");
    ids.forEach((id) => {
        let iconEl = tableEl.createDiv("icon-item");
        obsidian.setIcon(iconEl, id);
        obsidian.setTooltip(iconEl, id, { delay: 0 });
        iconEl.onclick = () => {
            navigator.clipboard.writeText(id);
            new Notice("Copied to clipboard.");
        }
    });
}

let lucide_ids = obsidian.getIconIds()
    .filter(id => id.startsWith("lucide-"))
    .map(id => id.slice(7));
dv.paragraph(`${lucide_ids.length} Lucide icons`);
renderIconTable(lucide_ids);

let other_ids = obsidian.getIconIds().filter(id => !id.startsWith("lucide-"));
dv.paragraph(`${other_ids.length} other icons`);
renderIconTable(other_ids);

List all Icons

List all icons available to setIcon() with Dataview

Clicking on an icon will copy its id to clipboard.

GREAT!!! THANKS A LOT

.. Dude? Holy heck?
THANK YOU.

Once again I am dumbfounded at the things that can be done with a few lines of code.

Literally just open the note in your vault > Press enter & click the link
Done.

You rock for this.

Tysm for this! I refactored a little in my own fork to add a search box 😛