Add Color to Inline Icons

Is your feature request related to a problem? Please describe. As a note taker, When I am reading notes, I often am frustrated that I cannot quickly determine an icons meaning based on shape alone

Describe the solution you'd like Given I am writing a note, When I add an icon using the obsidian-iconize plugin inline syntax, Then I would like to be able to specify the color

Suggested Syntax:

:<icon-name>|<color>:

<icon-name> is the already defined icon name used when typing icons inline. <color> could be in the form of either color name, hex code color, or css variable / css custom property.

Example - Uses Color Names

# 3D Printing a Custom Coaster for my desk
:LiThumbsDown|red: Print 1 on my 3D Printer failed. Needed to [[calibrate printer]].
:LiThumbsUp|green: Print 2 on my 3D Printer succeed!

Example - Uses Hex Codes

# 3D Printing a Custom Coaster for my desk
:LiThumbsDown|#fa1302: Print 1 on my 3D Printer failed. Needed to [[calibrate printer]].
:LiThumbsUp|#02de40: Print 2 on my 3D Printer succeed!

Example - Uses CSS Variables / CSS Custom Properties

# 3D Printing a Custom Coaster for my desk
:LiThumbsDown|--theme-color-fail: Print 1 on my 3D Printer failed. Needed to [[calibrate printer]].
:LiThumbsUp|--theme-color-success: Print 2 on my 3D Printer succeed!

Describe alternatives you've considered Alternatively, there could be a color picker. However, that seems both more technically challenging to implement and more difficult to use while taking notes.

Additional context As an additional feature, it would be AWESOME if some of the color options could include tooling to help you pick a valid color. Examples listed below.

Named Colors - Auto complete once you start typing. Similar how icons are listed after you type a colon.
Hex Codes - Perhaps there's a way to integrate a color picker here? Again this may be overkill and difficult to do elegantly.
CSS Custom Properties / CSS Variables - Not sure there are many options here. Maybe the user is able to provide a list of valid css variables for their theme and those are autocompleted after you type --. This would reduce the need for me to have those values memorize while I'm typing my notes.

NOTE: I did my best to describe this suggestion as concisely and accurately as possible. If I can provide more clarity or help brainstorm alternative solutions I would be happy to do so! I'd even be willing to help code the solution if it's something we agree would be a good feature to add! 🙂

FlorianWoelki / obsidian-iconize

Add Color to Inline Icons #301