How GJS Gtk.Button add image?

Desktop
,
1 
const image = new Gtk.Image({
      gicon: Gio.icon_new_for_string(icon_name),
      pixel_size: 64
});

const button = new Gtk.Button({
    label: 'Browse',
    valign: Gtk.Align.CENTER
});

//button.container.add(image);
2

A Gtk.Button can either contain one child widget, a label or a icon.

If you want both label and icon, you need to add a box as the child of the button containing both icon and label.

As a side note: If you use libadwaita, you can use Adw.ButtonContent for this.

2 Likes
3 
const imageButton1 = new Gtk.Button({
    icon_name: 'dialog-information-symbolic',
    valign: Gtk.Align.CENTER,
});

const imageButton2 = new Gtk.Button({
    child: new Gtk.Image({
        icon_name: 'dialog-information-symbolic',
    }),
   valign: Gtk.Align.CENTER,
});


const labelButton1 = new Gtk.Button({
    label: 'Click Me!',
    valign: Gtk.Align.CENTER,
});

const labelButton2 = new Gtk.Button({
    child: new Gtk.Label({
        label: 'Click Me!',
    }),
   valign: Gtk.Align.CENTER,
});


// libadwaita (as mentioned above)
const imageLabelButton = new Gtk.Button({
    child: new Adw.ButtonContent({
        label: 'Click Me!',
        icon_name: 'dialog-information-symbolic',
    }),
   valign: Gtk.Align.CENTER,
});
1 Like
4

button.set_child(image);