How to have a Gtk.Button with Icon and Label

[anthonyirwin82]

I am trying to create a button that has an icon in it. My understanding is that Gtk will display icons from https://specifications.freedesktop.org/icon-naming-spec/latest/ and that themes used on the system are supposed to implement the icons listed in the standard.

I am using GirCore.Gtk-4.0 version 0.5.0 from nuget.

I am trying to do the following:

           var quitButton = Gtk.Button.NewFromIconName("application-exit");
            quitButton.SetLabel("Quit");
            quitButton.SetMarginStart(10);  // Left margin
            quitButton.SetMarginEnd(10);    // Right margin
            quitButton.SetMarginTop(10);    // Top margin
            quitButton.SetMarginBottom(10); // Bottom margin

When the button is displayed in the window, it only shows the label with the word Quit in it but does not show the application-exit icon. I am assuming that the application is not using a theme that has the application-exit icon

I have tested the following:

                var icon= Gtk.IconTheme.New();
                icon.SetThemeName("Adwaita");
                Console.WriteLine($"{icon.GetThemeName()}");
                Console.WriteLine($"{icon.HasIcon("application-exit")}");

This returns the following:

Adwaita
True

I know the icon is in the Adwaita icon theme because of the above test but, I'm not sure how to make sure the Gtk Application is set to use the Adwaita theme or change the theme to something else.

The documentation at https://docs.gtk.org/gtk4/ctor.Button.new_from_icon_name.html says that a broken image icon should show if the icon name is not known. I tried using an icon name of xxx123 so that it would be unknown but no broken image icon displays either.

Any assistance pointing me in the right direction would be greatly appreciated.

Thanks,
Anthony

[anthonyirwin82]

Ok, with further experimentation I found that if you have the button with no label then the icon will display as expected.

I guess that means that the default is to show either a label or an icon but, not both together.

I am wondering if there is a standard recommended way to show both an icon and a label on a Gtk.Button widget?

Thanks,
Anthony

[badcel]

Sorry I'm just providing the bindings for GObject based libraries like GTK. I'm not a GTK dev or very experienced with it.

The GTK website recommends asking in their discourse forum in the platform core category.

If you get an answer or find a solution feel free to add it here for future reference.

[anthonyirwin82]

I can understand that, thanks for the work on the bindings.

[anthonyirwin82]

The Gtk.Button will display either a Label or an Icon but not both at the same time. If you want to have both a icon and a label on a button then you need to make a Gtk.Box a child of the Gtk.Button and add the Gtk.Image and Gtk.Label to the Gtk.Box.

Example of a Quit Button with an Icon and a Label:

var quitButton = Gtk.Button.New();
var quitBox = Gtk.Box.New(Gtk.Orientation.Horizontal, 10);
// Creates a label that you can use Alt+Q to act the same as clicking the button
var quitLabel = Gtk.Label.NewWithMnemonic("_Quit");
// Icon Names come from https://specifications.freedesktop.org/icon-naming-spec/latest/
// The theme needs to have the icon Gtk Apps by default use the Adwaita theme
var quitIcon = Gtk.Image.NewFromIconName("application-exit");
quitBox.Append(quitIcon);
quitBox.Append(quitLabel);
// Sets the quitButton to have the quitBox as it's child so it will show both the Icon and Label
quitButton.SetChild(quitBox);
quitButton.SetMarginStart(10);  // Left margin
quitButton.SetMarginEnd(10);    // Right margin
quitButton.SetMarginTop(10);    // Top margin
quitButton.SetMarginBottom(10); // Bottom margin