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:
I would like that that icon must be a color icon like this:
Is there a way to do it ? Because I have a small white icon when I change the default icon by the one above.
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.
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',
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.
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.
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).
I created a stylesheet.css file with the following lines in it:
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'});
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):
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.