Enable Custom Icons for File Tabs in the Sidebar

Use case or problem

I really like using my sidebar as a dashboard. To facilitate this, I have three different files tabbed and pinned in the sidebar for various groups of Dataviews.

I can pretty easily remember which is which of the three, but it would be nice to be able to assign an icon instead of the default file icon.

Proposed solution

Enable custom icons for file tabs in the sidebar.

Current workaround (optional)

I believe this person has a CSS workaround that works the same.

Related feature requests (optional)

7 Likes

I would like to second this feature request. There’s no use saving notes in the sidebar if they all look like [:page_facing_up:][:page_facing_up:][:page_facing_up:][:page_facing_up:]

I was sent here after making a related help request:

2 Likes

I’d really like to have this too.

2 Likes

Seems like something that should be a default function. The CSS workaround is a very convoluted way around this and it’s extremely cumbersome to set icons for files that way. They also stop working if the file name changes.

1 Like

I currently use the Icon Folder plugin for this purpose, and it lets me set icons for notes, too. It also replaces the :page_facing_up: in bookmarks and tabs with the assigned icon.

I also think this would be a cool native feature, but probably not a priority since it can be achieved with plugins.

1 Like

Interesting! I installed Icon Folder and see that it works fine for the File Explorer as sold, but the files that I added icons still have the default paper icon for the tabs. That doesn’t appear to be a supported function per the README.

I agree that this specific use case shouldn’t be a high priority, though. If anything, this is just aesthetic for me as I’ve memorized the workspace that I use.

CSS workaround is not that convoluted, tbh. Replacing the statically placed svg with a dynamic one via CSS is quite straightforward.

I’d also vote for a native solution, though.

You and I must have vastly different definitions of convoluted. Picking the icon via a UI element should be a native function included in obsidian since the beginning.

Some of us would like to use this feature more frequently than once in a blue moon, so yes it absolutely is convoluted if you’re doing it more than once or twice.

It’s pretty much a perfect example of convoluted.

First you have to go and open a .css file in your snippets folder. Next you have to copy paste the two blocks of code. Now you have to select the title and change it to the note’s title you want, then you have to copy paste that over to the next text block. Then you have to open your browser and go to a site like remixicon and let that load. You then spend a bunch of time searching for the right emoji because you can’t just put any regular emoji. Then you have to click around to set the size, switch over to the url option, and copy that. Then you have to get back to your css editor, paste that huge string of random text into the background image section, and save it. Then you have to check that it’s displaying properly in Obsidian, and inevitably go back to adjust the css so that it’s got the right margins because the icons don’t have consistent vertical margins. We also can’t just use regular, colored emojis, meaning that on top of all this we have to select and mess around with colors that work both in light and dark mode in order for the icons to be visible in more than one mode. All that to change a single icon. Nevermind the fact that you have to go and change the title in that file any time you want to change the title of the note, or mess around with all of that again if you ever want to change the emoji. Please tell me how that’s not convoluted. That is one real mess of a workflow for something very basic.

Ok, what I meant is that it’s not convoluted in terms of coding, so it can relatively easily be implemented in a plugin. I didn’t mean editing CSS directly is a good UX for an end user; there was no need to explain that in such details :slightly_smiling_face:

Found that iconize handles this quite well.

1 Like

I installed this plugin, but unfortunately it just creates an icon that sits next to the standard folder icon. It doesn’t replace it.

Iconize

I know this is not by design, but I can’t figure out the fix. I’ve raised a ticket on Github, but I haven’t heard back yet.