florianwoelki/obsidian-iconize

Simply add icons to anything you want in Obsidian.

Obsidian Iconize

What is it?

This obsidian plugin allows you to add any custom icon (of type .svg) or from an icon pack to anything you want.

Refer to the official documentation for more information: https://florianwoelki.github.io/obsidian-iconize/ about the plugin and its functionalities.

If you like this plugin, feel free to support the development by buying a coffee:

Key Highlights

Icons before file/folder name, Icons in notes, Icon above title, Predefined icon packs, Icons in tabs, Customizable settings, Custom rules, Frontmatter integration, Change color of an individual icon,

Development

To customize this project for your needs, you can clone it and then install all dependencies:

$ git clone https://github.com/FlorianWoelki/obsidian-iconize
$ cd obsidian-iconize
$ pnpm i

After the installation, you need to create a env.js file in the root directory. Fill the file with the following content:

export const obsidianExportPath =
  '<path-to-obsidian-vault>/.obsidian/plugins/obsidian-iconize/';

Make sure you create the directory specified in that variable if it does not exist yet.

Afterwards, you can start the rollup dev server by using:

$ pnpm dev

This command will automatically build the neccesary files for testing and developing on every change. Furthermore, it does copy all the necessary files to the plugin directory you specified.

Finally, you can customize the plugin and add it to your plugins.

obsidian-iconize's Issues

Allow Different Icon Colors For Individual Folders/Files

Is your feature request related to a problem? Please describe.
Right now, as far as I can find, I can only change every icon's color to a single color.

Describe the solution you'd like
The ability to choose the icon's color in the "Change Icon" menu or new menu for each folder/file individually.

Describe alternatives you've considered
Instead of individually choosing the colors, colors could be set in the plugin's settings page through regex selectors. That way any note with certain characters in its name could be the same colors (or even based on note tags?)

Icons are lost when disabling Plugin

When I disable this plugin, I loose some of the folder icons. I am not sure why but am glad to help debug it. When I re-enable them they still are broken.

Adding our own custom icons

It would be nice to be able to add our own custom icons.

Perhaps in settings one could upload SVGs to have them included in a user lib JS file or something.

Abnormal icon size after upgrading Obsidian

I recently upgraded to v13.18 of Obsidian and the icons before my folder became gigantic.
I'm using the newest version of the plugin.
Could this be fixed?

Icon pack issues with Synchronization

Describe the bug
We've received a high volume of Obsidian Sync issues related to this plugin generating icon packs with many files, causing Sync to get clogged up.

Feature

Please, add support for https://devicon.dev/

Select icon rendering is broken

The rendering of search results in the icon select modal dialog seems to be broken. When the dialog first opens, the icons are displayed correctly. However, searching causes strange line breaks and for text and icons to be rendered on top of each other.

Here's a screenshot illustrating the issue:

OS and version info:

• MacOS 11.6.2
• Obsidian: v0.13.14
• Icon Folder: 1.0.53

Support icons from Icon Shortcodes

Support Icon Shortcodes API, so that people can use custom icon ?

https://github.com/aidenlx/obsidian-icon-shortcodes/blob/master/src/typings/api.ts

suggestion: rename plugin 'Folder Icon'

it's up to you, but on the obsidian discord and in the forums everyone tends to say 'folder icon plugin' when they bring up your plugin... might help to reduce confusion / help people find the plugin more easily :)

Missing Icon Packs

With this issue, I keep track of the missing Icon Packs that will be included in the plugin.

Icon Pack	Implemented
Fontawesome	✅
Remixicons	✅
Boxicons	❌
IconMoons Free	❌
RPGAwesome	❌
Material Icons	❌
twemoji	✅
devicon	❌

✅ - Published and implemented
❌ - Not yet implemented

Please comment on this issue, if you have a request for an icon pack.

Automatically add icon based on tags/frontmatter

It would be great to have the ability to define and add an icon either by the tags a note contains or through frontmatter.

[Mobile] Once the selected icon is in the "Recently used Icons" item the whole display template will drop

Once you select any icon and it will be in the "Recently used Icons" item - the whole display template will drop.

FR: FontAwesome and RPGAwesome icon set support

Currently using Admonition in Obsidian and already got these dependencies running, could be possible to benefit from it?

https://github.com/valentine195/obsidian-admonition#icon

[Suggestion] RPG-Awesome support

RPG-Awesome would be a great addition, mostly because it'll be easier to pick icons for my fantasy-related folders lol

[Suggestion] Quicker access to frequently used or recently used icons

It would be nice to have faster access to frequently used icons. Could potentially be in the form of a row or two of icons in the dialog that pops up when users want to add an icon.

[Feature Request] Allow same icon for all folders and files of those without an icon

1. Please allow to change all icons with the same icon.
2. Allow all remaining files without an icon to have same icon change.
3. allow files to have all same icon feature separate from folders.

This would be a great update !

icon pack download does not work on mobile devices

When adding icon packs on mobile devices (actual ios as well as android) nothing seems to happen. After restarting obsidan, only an empty folder of the icon pack appears.

Tried the default folder as well as ".obsidian/icons"

Thanks a lot!

Support Quick Explorer plugin

@FlorianWoelki

---

Request

support plugin Quick Explorer, and there's an issue i commit on quick-explorer:
#36 Support "Icon Folder" plugin

Environment

OS: win 10
Ob: v0.13.33
Quick Explorer: 0.1.14

Last

hope for your reply 😁

The latest update (v. 1.0.51) makes the command pallet in squares

I am in Legacy Editor, on Windows. Obsidian v. 0.13.16. I have tried in the Obsidian original theme and the command pallet still shows in squares (see screenshot).

When I disable the Icon Folder plugin, the command pallet is back to normal.

I found out that all suggesters including Recent Files are also in squares.

Giant icons

Hey @FlorianWoelki and thank you for your Obsidian plugin. For the last couple of days, it has had a strange behavior though, resulting in the issue captured below.
.

I tried updating (v 1.0.54), disabling / reanabling but it didn't work out. Any clue why the plugin stopped working ? Cheers.

Displaying icons in search and backlinks and color groups

Hey, @FlorianWoelki! Thanks for the cool plugin!

Is there any chance to see such features in future releases?

• Displaying icons in search results and backlinks.
• Ability to create color groups for icons (something like graph color groups)

This will bring the ability to easily visually distinguish between note types in search and backlinks. Something like this:

.

Font and option suggestion

Hello.
I work since Day on my css snippet for icon. I want to know if it's possible to fusion with your plugin.

So, some suggestion :

• Font
  • Font Awesome (Regular, Brands, and Solid)
  • Boxicons
  • IconMoons Free
  • Material Icons
• Adding an option to change size (because you use remixicons 16px) with Style settings
• Adding an option to change placement settings (padding, margin, vertical-align and maybe left)
• Adding an option to change color

I think, if we can, fusion my snippet and your plugin can be super cool for other user !

Add vault event handlers for renaming and deleting.

Currently, if a folder is moved, renamed, or deleted, the icon database isn't being updated.

Renabling plugin causes double icons

If you disable the plugin, the folder icons remain.

If you reenable the plugin, the folder shows a double icon on files that have an icon on them.

support in the future for FontAwesome icons?

Hey! Loving the plugin so far, it's really useful for a very visual person like myself.
Do you see support for the FontAwesome (either v5 or v6) somewhere down the line? There are icons from areas besides business and such (some are clearer than the remix ones). the free section is quite large and available for commercial use!

Oversized folder icons in file explorer

Hi. Huge icons appear in Obsidian's file explorer, as in the image below.

Icon Folder 1.0.54
Obsidian 0.13.16
macOS 12.1

Bug: Icons missing on workspace reload

When toggling workspaces the icons dissapear.

Currently using Obsidian 0.12.15 and Icon Folder 1.0.0.

[BUG] White icon in white theme

Hello !
The new modal is pretty cool... But there is a display problem : All icon are white.
So, on white theme, it can be a problem !

The best way is to change here :

.obsidian-icon-folder-icon-preview svg {
 color: white;
}

to

.obsidian-icon-folder-icon-preview svg {
 color: currentColor;
}

With this I get that :
(white theme)

(black theme)

[bug] Icon on file removed on vault reload

My icon added on file are removed when I reload Obsidian. It is possible to update to fix this ? It will be so cool to have this plugin work with file !

Some Emojis aren't working correctly

For example, the Japan Flag 🇯🇵

Showing correctly in Modal:

Not showing correctly in sidebar:

I guess this is related to Windows, but it's showing correctly in Modal 🤔

Recently used icons in chronological order of last use

Now they are aranged in chronological order of first use (meaning: the first one in the list is the last that has been used for the first time).
I'd like them in chronological order of last use (meaning: the first one in the list should be the last that has been used).

Example
I use for the first time icon A, then B, then C, then again A

Now, I have them listed as C, B, A (and if my limit is set to n=2, A is not listed at all)
I'd like to have them listed as A, C, B (so that the last n used icons are always in the list)

Add possible emoji picker or native emojis

Should be possible to use native emojis or select others from other systems using an emoji picker like: Emoji Mart.

[Suggestion] Add option to save icons settings on normal/md file

It would be nice to add an option to configure a folder to save the icon settings, instead of just being able to save them in the .obsidian

This makes it easier for some ways of sync between different devices (For example: Obsidian Live-Sync it only sync no setting folders (it also sync plugins, but it doesn't work very well) or use github but only with normal/md files/folders to have different configuration in mobile and PC)

Extra: Hide this config file like Folder Notes description notes

css breaks command palette

The introduction of the new css code from #20 breaks the appereance of all other prompts e.g. the command palette (Ctrl+P) from the core plugins.

[suggestion] Inheritance icons & default icon for file

It will be good to have an option to inherit icons in file and folder.

Also, to add a default icon for file, icons will be removed when changed.

Image example :

Note : By default, my note have a default icons (added with css for the moment), but I add a specific icon for "Relation notes"

For the moment, I do this :

.nav-file-title:not(.nav-file-title.is-unsupported) .nav-file-title-content:before {
    content: "\ea37";
    font-family: boxicons;
    font-size: calc(var(--size) + 3%);
    margin-right: 5px;
    margin-left: 0px;
    vertical-align: -2px;
}

.nav-file-title-content[data-link-data-href="file_name"]::before {
    content: '' !important;
    margin-right: 0 !important;
}

I think, for theme compatibility, add a class/id in folder-file modified by the plugin, so you can work with this class to remove the content.

[BUG] Size doesn't work

Describe the bug
The size option doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Go to Settings
2. Change size

Expected behavior
An augmentation or diminution of the icons

Screenshots


Normally, the icons must be bigger than that!

Additional context
I already reload Obsidian to check.
Furthermore, in Obsidian dev console, height, and width doesn't change. I can change it using some CSS snippets.

[BUG] New update broke icon sizes

Currently using 1.0.6 on Obsidian 0.13.14.
Some icons won't load (see image below) while the rest are at their native size.

Bug persists with all themes.

Icons added to files (rather than folders) don't show until the vault is reloaded

Icons added to files work (wonderful, exactly the feature I was looking for), but at the moment they fail to add to the DOM immediately and only show once the vault/plugin is reloaded. I tracked this down to the addToDOM function in utils.ts, which currently only queries the selector for folders. Giving it fallback behaviour like this seems to fix the issue:

let titleNode = node.querySelector('.nav-folder-title-content');
if (!titleNode) {
    titleNode = node.querySelector('.nav-file-title-content');
}
if (!titleNode) {
    console.error('element with title not found');
    return;
}

Note I'm a real typescript novice so unsure if that's the most efficient solution.

Beta-testing icon generation

Describe the bug
Here we go again : when I want to build the app, the yarn dev print : [!] Error: Could not resolve '../remixicons' from src\util.ts

To Reproduce
Steps to reproduce the behavior:

1. git clone []
2. cd [] && yarn && node scripts/generate-icons.js
3. yarn dev
4. See error

Expected behavior
A build

Screenshots
/

Additional context
/

Some icons are lost when plugin is disabled then reenabled

I'm reporting two bugs here. Here is a test vault that (mostly) reproduces the issues: Test.zip

I'm using the Font Awesome Pro 6.1.0 icon pack and the two icons included in the above vault are from that pack.

1. Some icons are lost when plugin is disabled then reenabled

In my vault, if I disable the plugin and reenable it, nearly half of my icons go away and I'm just left with the icon names instead. Changing the icon to the same one fixes it. Restarting Obsidian does not fix the broken icons.

In the linked test vault, the behavior is the same, except restarting Obsidian does fix the broken icon. I'm not sure why that's the case.

2. Some icons do not work at all

In the test vault, the icon on file Test1 does not display. In my vault, there are several other icons that also just don't work.

Lost folder icons after last upgrade to icon shortcodes

Not sure which version I was on, but after upgrading to latest obsidian-icon-shortcodes (0.8.4) I received the following error and lost all my folder icons saved to my folders

loading Icon Shortcodes
VM221:42252 Uncaught (in promise) TypeError: Cannot destructure property 'basename' of 'app.workspace.getActiveFile(...)' as it is null.
    at instance$1 (eval at <anonymous> (app.js:1), <anonymous>:42252:8)
    at init (eval at <anonymous> (app.js:1), <anonymous>:3887:11)
    at new SideTree (eval at <anonymous> (app.js:1), <anonymous>:42317:3)
    at TreeView.draw (eval at <anonymous> (app.js:1), <anonymous>:42347:21)
    at refreshIndex (eval at <anonymous> (app.js:1), <anonymous>:35414:94)
    at async eval (eval at <anonymous> (app.js:1), <anonymous>:64349:17)
126app.js:1 Uncaught TypeError: Cannot read properties of null (reading 'basename')
    at eval (eval at <anonymous> (app.js:1), <anonymous>:42256:59)
    at t.e.tryTrigger (app.js:1)
    at t.e.trigger (app.js:1)
    at t.trigger (app.js:1)
    at t.activeLeafEvents (app.js:1)
    at a (app.js:1)

Opening in his github as well. aidenlx/obsidian-icon-shortcodes#33

Plugin cannot be updated

This plugin cannot be updated from version 1.0.22 to next.

Twemoji is not listed as one of the icon packs available for downloading

Only the 3 font-awesome and the one remix packs are listed.

New Modal Design

.prompt-results {
    /* list-style: none; */
    margin: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-auto-rows: 90px;
}

.suggestion-item {
   /*  position: relative; */
    cursor: pointer;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column-reverse;
    text-align: center;
    font-size: 13px;
    color: gray;
    padding: 16px 8px;
    line-break: auto;
    word-break: break-word;
    line-height: 1.3;
}

.obsidian-icon-folder-icon-preview svg {
    width: 24px;
    height: 24px;
    color: white;
    margin-bottom: 4px;
}

Motivation:

More items per line => Shorter scroll
Box view for every icon => Easier on eye
Smaller and duller text => It's easier to look for icons than looking for their name

Not able to use twemoji

Hey there, twemoji was after I had initially found out about this plugin, so I was eager to try it. It's not quite working as expected for me though.

I read the notes in README.md:

Right-click the folder
Click Change icon
Open your OS-specific emoji dialog
Select the option Use twemoji emoji

Here's me trying to set 🚀 as a folder icon:

CleanShot.2021-12-31.at.15.32.30.mp4

Maybe I am misunderstanding the instructions?

Icon not display in new version 1.1.0

all icons are shown as "Ri%%%%line", and there are obsidian error reports shown as "seems that you do not have an icon pack installed"

Custom icons not displayed correctly

After loading a custom icon set, a lot of the icons are displayed incorrectly

Steps to reproduce

1. Download custom icon set -> https://github.com/icons8/flat-color-icons
2. Navigate to Icon Folder settings
3. Created new Icon pack (e.g. name it Icons8)
4. Click edit
5. Navigate to folder with the list of unzipped .zvgs, select all and apply
6. Wait for icons to be loaded
7. Edit a file to change the icon

Expected behavior
The icons should be displayed and displayed as per original design.

Actual results
-Some icons are grey in color, and not per original design (i.e. colored). Perhaps it is because it is inheriting the icon design from a different source, other than the actual loaded icon?
-Some icons show as empty

Screenshots

Use Twemoji without icon packs

Describe the bug
It is not possible to use Twemoji without any existing icon pack.

Expected behavior
Input field should be not disabled and you should choose a Twemoji without any existing icon pack.

[bug] Error : Could not resolve remixicon from src/utils

I try to dev on this plugin, but using yarn dev print this to me. I follow all the command in the docs :/

Add customization options for icons

Add different customization options for the size, color, and placement of the icon.

Suggestion from this issue.