Change the icon of the show desktop applet extension

Hello,

I found the show desktop applet extension on the extensions.gnome.org website. The icon displayed on the panel is a symbolic icon. So, it is a black and white icon: icon_1194

I would like that that icon must be a color icon like this: showdesktop

Is there a way to do it ? Because I have a small white icon when I change the default icon by the one above.

Thanks.

This is how it was done in xfce with Papirus. Maybe you can modify using this as an example.

~/.config/gtk-3.0/gtk.css file (if it doesn’t exist create it)

#showdesktop-1 image {opacity:0;} /* the number after showdesktop may differ on your system. Go to the Panel preferences > Items tab and hover your mouse over the item to get the correct number */
#showdesktop-1 button {
background-image:url('/usr/share/icons/Papirus/22x22/places/folder-teal-desktop.svg');
background-size:78%; /* or adjust value till it looks sharp */
background-position:50% 50%;
background-repeat:no-repeat;
}

Then run xfce4-panel -r to reset the panel.

Here is the code where the icon is defined in the extension source code (extension.js):

function getPanelButton() {
panelButton = new PanelMenu.Button(0.0, ${ExtensionName}, false);

let icon = new St.Icon({
icon_name: ‘computer-symbolic’,
style_class: ‘system-status-icon’,
});

panelButton.add_child(icon);

panelButton.connect(‘button-press-event’, toggleDesktop);

panelButton.connect_after(‘key-release-event’, (actor, event) => {
let symbol = event.get_key_symbol();
if (symbol == Clutter.KEY_Return || symbol == Clutter.KEY_space) {
toggleDesktop();
}
return Clutter.EVENT_PROPAGATE;
});

return panelButton;
}

Here it is the extension who display the icon. So, probably something must be changed in the source code but what ?

Note: the whole source code can be find here: Show-Desktop-Applet/extension.js at master ¡ Valent-in/Show-Desktop-Applet ¡ GitHub

I can’t provide a solution but the following link would be a good starting point to start learning how icons work in gnome/GTK Design/OS/SymbolicIcons - GNOME Wiki!

This part is relevant:

let icon = new St.Icon({
		icon_name: 'computer-symbolic',
		style_class: 'system-status-icon',

Thanks for your help.

Well, it is not easy and I don’t know anything about javascript and programming. I think the best thing will be to have the option to choose an icon for the show desktop button with the Dash-to-panel extension. But for now, no answers from the developers of that extension. :frowning:

Hello,

I found a way to change the symbolic icon with the color icon that I want. I made a search on the web. I tried with the show-desktop-button gnome extension and the show-desktop-applet gnome extension. Here is what I done.

  1. I created an “icons” folder in the show-desktop-applet@valent-in directory and I put the svg icon for show-desktop-button (32pxX32px) in it.(see the first message in the topic).

  2. I created a stylesheet.css file with the following lines in it:

.show-desktop-button {
    background-image: url("icons/show-desktop-button.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}
  1. I modified the extension.js file by removing that line:
let icon = new St.Icon({
		icon_name: 'user-home-symbolic',
		style_class: 'system-status-icon',
	});

and by replacing with it:

let icon = new St.Icon({style_class: 'show-desktop-button'});

  1. Log out session, or reenable the extension.

Here is the result (the third is the show-desktop-button and the second is the activites button):

showdesktopbutton

Note: When I resize the panel, the size of the button don’t change. It’s just a little problem (probably from the show-desktop-button/applet extension). The dash-to-panel extension is used.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.