2

I try to use a custom SVG for my GNOME shell extension as status icon in top panel. But the custom icon is never shown, just the widget's label text. And I find no error in log output.

When I try to set a build-in icon like "system-search-symbolic" it works, this icon is shown.

This is my code snippet (the SVG is in an "icons" directory of my extension: /home/myusername/.local/share/gnome-shell/extensions/my-widget@my-widgets/icons/timeclock-16x16.svg):

// ...

let widgetBoxLayout = new St.BoxLayout();

let iconPath = `${Me.path}/icons/timeclock-16x16.svg`;
// just for debug if path is correct
log(`${Me.metadata.name}: Icon path=${iconPath}`);
let gicon = Gio.icon_new_for_string(`${iconPath}`);
let icon = new St.Icon({ gicon: gicon, style_class: 'system-status-icon', icon_size: 16 });

// this works for build-in icon:
//let icon = new St.Icon({ icon_name: 'system-search-symbolic', style_class: 'system-status-icon'});

widgetBoxLayout.add(icon);
widgetBoxLayout.add(this.widgetText);

//...

Maybe it's a problem that there is an "@" char in icon path? But why no error is logged?

What is the correct code to use a custom icon for status panel?

(I have GNOME Shell 3.30.2)

tobias47n9e
  • 2,233
  • 3
  • 28
  • 54
Dodo
  • 156
  • 2
  • 14

2 Answers2

4

Oh no! This one of these "fight for weeks alone, finally ask the crowd, suddenly know the solution yourself" cases ...

The icon was actually visible but since I use a dark theme and the icon itself is also dark it was not "visible". I inverted the colors of this icon and now I can see the icon next to my text in top panel.

Now I have to find out which icon to use depending on user's theme, but the original issue is solved.

Maybe this answer helps other developer making same stupid error.

Dodo
  • 156
  • 2
  • 14
0

You need to use -symbolic icons to allow automatic theme aware re-colorization of the icons. Just change the file name of the icon to timeclock-symbolic.svg, at least this should be your first step if every other aspect is fine.

Tamás Tóth - ebola
  • 1
  • 2