Images
Icon
SVG icons in the color of the text.
ui.Icon shows an SVG as an icon: in the color of the text, which it takes
from its ancestors as text does, whatever colors the file has, and as high
as the font size, keeping the SVG's aspect ratio. Icon sets such as Lucide,
Heroicons, Tabler or Material Symbols work as they are:
//go:embed icons/save.svg
var saveSVG []byte
var save = ui.MustParseSVG(saveSVG)
ui.Row(c).Gap(6).Children(func() {
ui.Icon(c, save)
ui.Text(c, "Save")
})
ui.Icon(c, save).FontSize(24).TextColor(c.Theme().Danger)FontSize and TextColor size and color it, as they do text; Size gives
it another size. An icon does not stretch across a column.
In buttons
Inside a button, which lays out its children in a row and gives them its text color, an icon goes before the label:
ui.PrimaryButton(c, "").Children(func() {
ui.Icon(c, save)
ui.Text(c, "Save").SingleLine()
})Rotate turns an icon, as a spinner or an arrow that opens:
spin := ui.Icon(c, loader)
spin.Rotate(spin.Loop("spin", time.Second, ui.Linear) * 360)How MyGo draws SVGs, and what of them it draws, is on the
Image page. In Draw callbacks, Painter.Icon draws an
icon.
Accessibility
Icons are decorations that assistive technology does not see, unless
Label names them: name a button showing only an icon instead.