8.19.51. Icons

imgui_icons is an asset-free vector icon set: every glyph is geometry drawn straight onto the ImGui draw list — no SVG, no texture atlas, no font merge. Glyphs are authored on a logical 24x24 grid and tinted from the daslang amber accent, so they scale to any size and follow the theme. Two entry points:

  • icon_button(IDENT, (glyph = "play", tip = "Play")) — a clickable, themed icon button. It uses ClickState like any button (state.click_count accumulates, snapshot kind icon_button), and a non-empty tip shows a hover tooltip.

  • icon("waveform", 24.0f) — draw a glyph at the cursor with no interaction, then advance the cursor. Use it for inline chrome, status rows, or labels.

Glyphs are addressed by name. The whole set is enumerable with icon_count() / icon_name(i) / icon_category(i) — enough to build an in-app icon picker. The full visual catalog (every glyph, by category) is the Icon set reference page.

Source: modules/dasImgui/examples/tutorial/icons.das.

8.19.51.1. Walkthrough

  1options gen2
  2options _comment_hygiene = true
  3options gc
  4
  5require imgui
  6require imgui_app
  7require opengl/opengl_boost
  8require live/glfw_live
  9require live/live_api
 10require live/live_commands
 11require live/live_vars
 12require live/opengl_live
 13require live_host
 14require imgui/imgui_live
 15require imgui/imgui_boost_runtime
 16require imgui/imgui_boost_v2
 17require imgui/imgui_widgets_builtin
 18require imgui/imgui_containers_builtin
 19require imgui/imgui_visual_aids
 20require imgui/imgui_icons
 21
 22// =============================================================================
 23// TUTORIAL: imgui_icons — an asset-free vector icon set.
 24//
 25// Every glyph is geometry drawn straight onto the ImGui draw list (no SVG, no
 26// texture atlas), tinted from the daslang amber accent. Two ways to use it:
 27//
 28//   icon_button(IDENT, (glyph = "play", tip = "Play"))   — a clickable, themed
 29//                                                           icon button. Uses
 30//                                                           ClickState like any
 31//                                                           button; returns true
 32//                                                           on click.
 33//   icon("waveform", 24.0f)                               — draw a glyph at the
 34//                                                           cursor (no interaction)
 35//                                                           and advance the cursor.
 36//
 37// Glyphs are addressed by name. Enumerate the whole set with icon_count() /
 38// icon_name(i) / icon_category(i) — e.g. to build an icon picker. The full
 39// catalog (with images) is in the docs: stdlib -> Builtin widgets -> Icon set.
 40//
 41// STANDALONE: daslang.exe modules/dasImgui/examples/tutorial/icons.das
 42// LIVE:       daslang-live modules/dasImgui/examples/tutorial/icons.das
 43//
 44// DRIVE (when running live):
 45//   curl -X POST -d '{"name":"imgui_click","args":{"target":"IC_WIN/IC_PLAY"}}' \
 46//        localhost:9090/command
 47// =============================================================================
 48
 49[export]
 50def init() {
 51    live_create_window("dasImgui icons tutorial", 680, 560)
 52    live_imgui_init(live_window)
 53    var style & = unsafe(GetStyle())
 54    style.FontScaleMain = 1.4f
 55}
 56
 57[export]
 58def update() {
 59    if (!live_begin_frame()) return
 60    begin_frame()
 61
 62    ImGui_ImplGlfw_NewFrame()
 63    apply_synth_io_override()
 64    NewFrame()
 65
 66    SetNextWindowPos(ImVec2(20.0f, 20.0f), ImGuiCond.Always)
 67    SetNextWindowSize(ImVec2(640.0f, 520.0f), ImGuiCond.Always)
 68    window(IC_WIN, (text = "icons tutorial", closable = false,
 69                    flags = ImGuiWindowFlags.None)) {
 70
 71        text("Vector icons drawn on the draw list - no atlas, no asset files.")
 72        separator()
 73
 74        // ---- Stage 1: icon_button — a clickable transport bar ----
 75        text(IC_HINT, (text = "icon_button: clickable, themed, addressed by glyph name."))
 76        icon_button(IC_PLAY,  (glyph = "play",   tip = "Play"));   same_line(IC_SL1)
 77        icon_button(IC_PAUSE, (glyph = "pause",  tip = "Pause"));  same_line(IC_SL2)
 78        icon_button(IC_STOP,  (glyph = "stop",   tip = "Stop"));   same_line(IC_SL3)
 79        icon_button(IC_REC,   (glyph = "record", tip = "Record"))
 80        text("clicks: play={IC_PLAY.click_count} pause={IC_PAUSE.click_count} stop={IC_STOP.click_count} rec={IC_REC.click_count}")
 81        spacing()
 82
 83        // ---- Stage 2: tip + the rest of an edit toolbar ----
 84        text(IC_HINT2, (text = "A non-empty tip shows a hover tooltip - hover any glyph."))
 85        icon_button(IC_UNDO, (glyph = "undo", tip = "Undo")); same_line(IC_SL4)
 86        icon_button(IC_REDO, (glyph = "redo", tip = "Redo")); same_line(IC_SL5)
 87        icon_button(IC_CUT,  (glyph = "cut",  tip = "Cut"));  same_line(IC_SL6)
 88        icon_button(IC_SAVE, (glyph = "save", tip = "Save"))
 89        spacing()
 90        separator()
 91
 92        // ---- Stage 3: icon() — draw-only, any size ----
 93        text(IC_DISP, (text = "icon(name, size): draw a glyph inline, no interaction. Sizes scale freely:"))
 94        icon("waveform", 20.0f); same_line()
 95        icon("waveform", 32.0f); same_line()
 96        icon("waveform", 48.0f)
 97        spacing()
 98        text("The set spans transport, edit, mix, synth, scene and chrome glyphs:")
 99        icon("filter", 28.0f);    same_line()
100        icon("knob", 28.0f);      same_line()
101        icon("wave-sine", 28.0f); same_line()
102        icon("layers", 28.0f);    same_line()
103        icon("camera", 28.0f);    same_line()
104        icon("gear", 28.0f)
105        spacing()
106        separator()
107
108        // ---- Stage 4: enumerate the catalog ----
109        text("icon_count()/icon_name(i)/icon_category(i) enumerate the set:")
110        text("{icon_count()} glyphs - e.g. [0] '{icon_name(0)}' in '{icon_category(0)}'.")
111    }
112
113    end_of_frame()
114    Render()
115    var w, h : int
116    live_get_framebuffer_size(w, h)
117    glViewport(0, 0, w, h)
118    glClearColor(0.10f, 0.10f, 0.12f, 1.0f)
119    glClear(GL_COLOR_BUFFER_BIT)
120    live_imgui_render()
121
122    live_end_frame()
123}
124
125[export]
126def shutdown() {
127    live_imgui_shutdown()
128    live_destroy_window()
129}
130
131[export]
132def main() {
133    init()
134    while (!exit_requested()) {
135        update()
136        maybe_collect_gc()
137    }
138    shutdown()
139}

8.19.51.1.1. Requires

  • imgui/imgui_icons — the icon set: icon, icon_button_draw, and the catalog accessors.

  • imgui/imgui_widgets_builtin — the icon_button [widget] (themed, snapshot-visible, playwright-drivable wrapper over icon_button_draw).

8.19.51.1.2. icon_button — clickable

icon_button is a registered [widget]: it carries ClickState and behaves exactly like button, so it works with the snapshot, the playwright click verb, and click-count verification.

icon_button(IC_PLAY, (glyph = "play",  tip = "Play"));  same_line(IC_SL1)
icon_button(IC_REC,  (glyph = "record", tip = "Record"))
text("play clicks = {IC_PLAY.click_count}")

glyph is the icon name; tip (optional) shows a hover tooltip; size (px, the glyph box side) and weight (stroke scale) round out the call. Pass the args in declared order — the indexed call form is positional.

8.19.51.1.3. icon() — draw only

When there is nothing to click, icon draws a glyph inline:

icon("waveform", 20.0f); same_line()
icon("waveform", 32.0f); same_line()
icon("waveform", 48.0f)

Because the glyph is geometry (not a rasterized image), every size is crisp — there is no atlas resolution to outgrow. icon advances the cursor by the box size, so it lays out like any other item.

8.19.51.1.4. Enumerating the set

The catalog is data, so it is enumerable at runtime:

for (i in range(icon_count())) {
    text("{icon_name(i)} ({icon_category(i)})")
}

This is how the documentation catalog page is generated, and it is the same loop you would write to populate an icon picker.

8.19.51.1.5. Drawing without a button

icon_button is the wrapper most apps want, but two lower-level entry points exist for custom chrome:

  • icon(name, size, weight) — draw-only, shown above.

  • icon_button_draw(id, glyph, size, weight) — a clickable button that is not a registered widget (no snapshot path). Use it only for transient chrome that no test drives by name; otherwise prefer the icon_button widget.

See also

Full source: modules/dasImgui/examples/tutorial/icons.das

Visual catalog: Icon set — every glyph, grouped by category, with its name.

Regenerate the catalog images after adding a glyph: daslang -project_root . modules/dasImgui/utils/make_icon_doc.das (runs from the repo root, and must run windowed — it drives a real ImGui frame).

Boost macros — the macro layer.