Problem Description

Currently, Coder supports using emojis and icons, such as coder_app and coder_script, as documented in the icon picker documentation. However, while we expose an emoji/icon picker in the UI, this feature is not available when setting the icon property in the template editor or through Terraform. Users must specify the emoji path explicitly, which complicates the workflow.

For example, our current templates specify the icon for a region like this:

# Example with regional flags as icons
data "coder_parameter" "region" {
  icon = "/emojis/1f1fa-1f1f8.png" # Using explicit path for the US flag emoji
}

Desired Solution

It would be ideal if we could use emoji shorthands (e.g., :heart: for ❤️, :us: for 🇺🇸) directly in the template configuration, similar to how Markdown processes emojis. This would make the process more intuitive and reduce the need for specifying explicit paths.

Proposed Implementation

We could implement this feature by utilizing the Hugo library, which is already part of our stack. Specifically, we could use the transform.Emojify function from Hugo. This function allows text with shorthand emojis (e.g., I :heart: Hugo!) to automatically transform into the corresponding emoji (resulting in I ❤️ Hugo!).

Example Usage with transform.Emojify

# Proposed shorthand usage
data "coder_parameter" "region" {
  icon = ":us:" # Hugo's Emojify function converts this to the US flag emoji 🇺🇸
}

Using this function would streamline emoji usage in templates and simplify icon management.

Next Steps

1. Investigate the feasibility of integrating transform.Emojify within our template processing.
2. Update the documentation to reflect new shorthand capabilities for emojis/icons in templates.