How to set a PNG file in a Gnome Shell extension for St.Icon
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'});
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 });