Use Remix icons as folder icons

I thought I post this as a separate topic because some people in Meta Post - Common CSS Hacks liked it. This hack is inspired by the code of @riddyrayes to have emoji as folder icons


I really like the Remixicon icon set and I wanted to see if I could use them as folder icons.

image

It’s quite a hacky solution. And you will have to adapt it to your theme and font sizes. If you have improvements please post them.
The below code is to make it work for California Coast theme.

You can get the SVG URL of the icon you want to use by going to remixicons.com

  • Select the icon you like.
  • Click the triangle at ‘Copy SVG’
  • Choose ‘DataURL’.
  • Copy that URL and
  • Replace the background URL in the css below.

Don’t forget to change the ‘Timestamped’ name of the folder in the first line of CSS for your own folders’ name.

It’s more likely than not that for other themes you have to change the background-size, translate value, height, width and margin values to make everything line up nicely.

.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="Timestamped"] .nav-folder-title-content::before {
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm-2 2H9v2H7V5H4v4h16V5h-3v2h-2V5zm5 6H4v8h16v-8z'/%3E%3C/svg%3E");
  background-size: 14px 14px; /* adopt this to your file tree font height */
  transform: translate(0px, 4px); /* to position the icon */
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  width: 16px;
  margin: -4px 2px 0 0;
}

I have been thinking if it would be possible to use the icons that the plugin Obisidian Icons pulls in but I couldn’t find out how. If anyone has an idea for this?

2 Likes

I’m sorry to report that the above code doesn’t work in Dark mode. If anyone can contribute a line of code to make the icon adopt to the current mode? Thanks!