All events except vertical-line can be decorated with a colored SVG icon as shown above.
The frontmatter properties gantt-displayIcon and gantt-displayIconColor define and color the icon of your choice.
Icon
The frontmatter property gantt-displayIcon sets a custom icon to an event. Icon names are case-sensitive.
Icon color
The frontmatter property gantt-displayIconColor add color to the icon.
If not set, a global fallback color will be used. Change this default color in Plugin Settings > Events.
Example icon definitions
---
gantt-displayIcon: heart
gantt-displayIconColor: pink # CSS knows a lot of human-readable colors
---
---
gantt-displayIcon: plus
gantt-displayIconColor: "#0f172a" # You can use hex-colors
---
---
gantt-displayIcon: settings # No icon color is fine
---Tip
https://lucide.dev/ is a good source for icon names.
Property traits
- Both properties are of type
text; their usage is optional.- You can rename them to your liking, see Plugin Settings > Event Frontmatter Properties.