Icon Tags

Icon tags in Rhyme provide a simple way to include icons in your app using an exclamation mark syntax. Instead of dealing with complex icon configurations or imports, you can use friendly icon tags like !home, !mdi:account, or !feather:search directly in your Rhyme code.

How Icon Tags Work

Icon tags follow a simple pattern: ! followed by an icon name, with optional icon set prefix. For example:

!home - Basic home icon using the default icon set
!mdi:account - Account icon from the Material Design Icons set
!feather:search - Search icon from the Feather icon set
!home4 - Home icon with size 4

The Rhyme lexer automatically recognizes these icon tags during parsing and converts them into the appropriate icon references.

Icon Tag Formats

Short Format

When you use just the icon name (like !home), Rhyme automatically:

Checks if you’ve defined an alias for that name
If no alias exists, adds the default icon set prefix (usually “mdi”)
Resolves to the full icon reference

Full Format

You can specify the exact icon set using the format !iconset:iconname:

!mdi:home - Material Design Icons home
!feather:home - Feather Icons home
!heroicons:home - Heroicons home

Size Specification

Add a number to the end of any icon name to specify its size:

!home2 - Home icon at size 2
!mdi:account5 - Account icon at size 5

Setting Up Icons

Default Icon Set

Set the default icon set for your app:

set-iconset !mdi

Defining Icon Aliases

Create friendly names for icons:

icon !home
icon !user is !mdi:account
icon !search is !feather:search

Once defined, use these aliases throughout your app:

.button "Go Home" !home
.button "Profile" !user

Available Icon Sets

Rhyme works with popular icon libraries through the Iconify system:

Icon Set	Prefix	Description	Example
Material Design Icons	`!mdi:`	Comprehensive set with thousands of icons	`!mdi:home`
Feather	`!fe:`	Clean, simple line icons	`!fe:home`
Heroicons Outline	`!heroicons-outline:`	Modern outline icons	`!heroicons-outline:home`
Heroicons Solid	`!heroicons-solid:`	Modern solid icons	`!heroicons-solid:home`
Lucide	`!lucide:`	Beautiful, consistent icon set	`!lucide:home`
Tabler Icons	`!tabler:`	Scalable vector icons	`!tabler:home`

Many more icon sets are available! Visit Iconify to explore the complete collection and find the prefix for any icon set you want to use.

Usage Examples

Buttons with Icons

.button "Save" !save
.button "Delete" !trash #red6

.nav-item "Home" !home
.nav-item "Settings" !settings

Status Indicators

.status "Online" !check-circle #green6
.status "Offline" !x-circle #red6

Managing Icons

Offline Icon Storage

Icons can be cached locally for offline use:

icon !home    // This registers the icon for offline caching

Listing Available Icons

See what icons are available:

list-icons

Clearing Icon Cache

Clean up cached icons when needed:

clear-icons

Custom Icon Aliases

The alias system is particularly powerful for maintaining consistent iconography across your app:

// Define semantic aliases
icon !primary-action is !mdi:play
icon !secondary-action is !mdi:pause
icon !danger-action is !mdi:stop

// Use throughout your app
.button "Start" !primary-action #green6
.button "Pause" !secondary-action #yellow6
.button "Stop" !danger-action #red6

This approach:

Makes it easy to change icons globally by updating just the alias definition
Makes your code more readable by using descriptive names
Ensures consistent iconography throughout your app

Pro Tip: Start with the Material Design Icons (!mdi:) set - it has the most comprehensive collection of icons for almost any use case!