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