How to set a PNG file in a Gnome Shell extension for St.Icon

Question

My Gnome Shell extension has a folder 'icons' and there is an icon file called 'MyIcon.png' inside. I want to take it as a parameter to an St.Icon object.

let icon = new St.Icon({ /* I need what to code here*/ });

Thanks for any help.

Selcuk.

Yellows

Answer 1

Here is a solution for GnomeShell v3.8.4:

const St = imports.gi.St;
const Me = imports.misc.extensionUtils.getCurrentExtension();
const Gio = imports.gi.Gio;
let gicon = Gio.icon_new_for_string(Me.path + "/icons/my_icon.png");
icon = new St.Icon({ gicon });

Toomer

Thanks, that is exactly what I was talking about. – Yellows

Answer 2

Stumbled upon the very same problem yesterday.

You have to do two things:

Step 1: add this code to you "stylesheet.css"

.your-icon-name {
    background-image: url("icons/MyIcon.png");
    background-size: 20px;
    height: 20px;
    width: 20px;
}

'background-size', 'height' and 'width' are just there to prescale the image, they can be left out to keep the original size.

Step 2: Write this in your .js file:

let icon = new St.Icon({style_class: 'your-icon-name'});

Prehistoric

Yes, that's what I'm doing right now. However, there is a proper solution or workaround for the problem. I have seen an example where the developer included his own 'icons' directory to the search path. I will let you know where I've seen it whenever I have time for a google. Thanks. – Yellows

I'm confused why you think this is not a "proper solution". Is there something this is missing? – Supermarket

@EricFossum If we were to compare this to HTML, it would be like using the img tag, then not defining a src but setting the background image style for that img tag. That's what makes this not a proper solution. – Rashida

Answer 3

Here is an example of how to do it:

_getIconImage: function() {
     let icon_file = this._path + "/icons/icon.png";
     let file = Gio.file_new_for_path(icon_file);
     let icon_uri = file.get_uri();

     return St.TextureCache.get_default().load_uri_async(icon_uri, 64, 64);
},

myIcon = _getIconImage();

Mayday

Answer 4

For anyone wanting to add their extension's icon/ (or images/, etc.) sub directory to the search path in order to use CSS styles here is what is working for me:

function init(metadata) {
    // ...

    let theme = imports.gi.Gtk.IconTheme.get_default();
    theme.append_search_path(metadata.path + "/icons");

    // ...
}

Mahaffey