Missing Icon Packs

[FlorianWoelki]

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.

[ShahriarKh]

Will emojis be implemented too? Maybe https://github.com/twitter/twemoji.

[FlorianWoelki]

Will emojis be implemented too? Maybe https://github.com/twitter/twemoji.

Sure I can add it to the list.

[ocreturner]

does this mean emojis from the default os can be used ? that would be incredible!

as of now i add emojis to my folder titles but the size is not that appealing

[FlorianWoelki]

does this mean emojis from the default os can be used ? that would be incredible!

as of now i add emojis to my folder titles but the size is not that appealing

Exactly! Right now, the latest commit implements these changes. You can try it out if you want to.

The process of inserting an emoji is the following:

• Click on change icon
• Add the emoji (mac os is: control+command+space)
• Click the option "Use twemoji emoji"
• Enjoy and profit

What do you think about the workflow @Mara-Li

[Mara-Li]

Hi ! I dont use emoji as icon, but directly in file name because it facilite the searching (for example my cancer lesson had the 🦀 emoji). I use emoji has a "filter search".

But i heard some people want to use emoji, so it's a great improvment !

I prefer icon for folder icon because there are more choice and cutest !

[ShahriarKh]

Exactly! Right now, the latest commit implements these changes. You can try it out if you want to.

Wow! How can I install it? I tried copy/pasting the repo from github, but it fails to install... Should I run something with npm?

[FlorianWoelki]

Hi ! I dont use emoji as icon, but directly in file name because it facilite the searching (for example my cancer lesson had the 🦀 emoji). I use emoji has a "filter search".

But i heard some people want to use emoji, so it's a great improvment !

I prefer icon for folder icon because there are more choice and cutest !

Yeah that makes sense. The emoji is actually going to replace the icon. So the emoji will become the icon :D

Exactly! Right now, the latest commit implements these changes. You can try it out if you want to.

Wow! How can I install it? I tried copy/pasting the repo from github, but it fails to install... Should I run something with npm?

You can follow the Development section of the readme file.

Maybe you and @Mara-Li can check it out and test it, so I can release it asap.

[ShahriarKh]

I installed and tested. Really nice! The only problem I see is the icon size slider. Since the twemoji emojis are imgs, not text, the font-size has no effect on them.

[FlorianWoelki]

I installed and tested. Really nice! The only problem I see is the icon size slider. Since the twemoji emojis are imgs, not text, the font-size has no effect on them.

Thank you for testing it. It should work fine now :)

[aidenlx]

Hi! First of all, great work on folder icon! I'm the dev of Icon shortcodes plugin, which allow user to import any custom icon they have, such as RPGAwesome. Adding support for icon shortcodes would help user a lot in case they need to use their custom icons.

since v0.6.1, a new method getIconFromUser can open a modal to prompt user for icon selection. (make sure to check if it's available before calling it btw, you can do this by checking plugin version)

You can check here for details about its api: https://github.com/aidenlx/obsidian-icon-shortcodes#for-developer, and feel free to ask if you have any question :)

[FlorianWoelki]

Hi! First of all, great work on folder icon! I'm the dev of Icon shortcodes plugin, which allow user to import any custom icon they have, such as RPGAwesome. Adding support for icon shortcodes would help user a lot in case they need to use their custom icons.

since v0.6.1, a new method getIconFromUser can open a modal to prompt user for icon selection. (make sure to check if it's available before calling it btw, you can do this by checking plugin version)

You can check here for details about its api: https://github.com/aidenlx/obsidian-icon-shortcodes#for-developer, and feel free to ask if you have any question :)

Hey, I was thinking about implementing your API and I am still thinking about it. I really do like the idea. However, I am not a big fan of depending on so much API's and Dependencies.

[aidenlx]

Sure! To be honest, I actually got the inspiration of convert-svg-to-code script from your plugin, and I think it's totally ok to include some basic svg icon packs in your plugin pack. The feature that my plugin can offer is that it manage custom icons better and allow to import and use any format of icon that obsidian support, so that adding more icon support won't necessarily affect the packed size of the plugin.

However, I am not a big fan of depending on so much API's and Dependencies.

Actually, I think you can support it as a nice-to-have addition instead of a dependency, and it shouldn't take too much of effort to integrate as I've taken care of the nasty part of accessing the plugin api in published package.

If you have doubt, you can check Link Favicon and its source code, which has implemented the support for icon-shortcode recently.

[aidenlx]

btw, you can actually let rollup to handle svg imports and simply the svg import script, I'm using esbuild so it might differ a bit but the step should be similar: https://github.com/aidenlx/obsidian-icon-shortcodes/blob/master/scripts/generate-icon.js

[FlorianWoelki]

So I will try to implement the API asap. I really like the idea of importing an icon pack. Maybe we can just extract this feature? I will keep track of it at #27

[aidenlx]

No rush here, take your time!

btw I think you can take advantage of folder-note-core api to use icon field in front matter of folder note as an alternative way of storing icon of folders. I've implemented similar icon folder feature in my folder note plugin in order to stay compatible with California coast theme (the implementation is a bit different though, which use pseudo :before element)

[ShahriarKh]

https://missive.github.io/emoji-mart/

An emoji picker like this will be really useful. Not only it's easier to use, but we can also use it as a way to let users choose other emoji styles (native, Apple, facebook, ...)

The one in Notion is really cool.

[ocreturner]

ill have to agree, @FlorianWoelki as an apple user i would like to use the native emojis since everything in obsidian is using it except the folder icons if i use the plugin

[FlorianWoelki]

Sure thing. I will see if I can implement it asap. I will keep track of it at #34

[FlorianWoelki]

I will close this issue for now, because you can now add custom icons and icon packs. If a specific icon pack does not work, please open a new issue.

[namtrah]

Just curious. I cannot find out how to actually add custom icons and packs. Just downloading a zip file of SVG icons doesn't seem to work. Is there any specific formatting of the pack itself? (No need to reopen...but just curious)

[FlorianWoelki]

Just curious. I cannot find out how to actually add custom icons and packs. Just downloading a zip file of SVG icons doesn't seem to work. Is there any specific formatting of the pack itself? (No need to reopen...but just curious)

Sure. You just need to go to the settings and add an icon pack. Then you can drag and drop all your wanted icons into there.

[mardukbp]

For those interested:

• Material Icons
• Devicon