GTK icons for UI elements

[plhrtr]

Hi there,

Really enjoying the notification center so far! So thanks for your work!!

Quick question:
Is there currently a way to display the GTK icons inside menubuttons, labels, buttons-grid buttons and volume/backlight sliders?

So not just glyphs, but for example the audio-volume-high icon of your current icon theme.

Especially with text or multiple icons like you can do right now, e.g

"label": " Bluetooth",
"label": " ",

I looked in the issues, previous discussions and some user configs, but couldnt find anything. It would allow for a more coherent theme with the rest of the system.

Thanks in advance!

PS: While I'm already asking, there is currently no way to update the icons of the volume/backlight sliders depending on the given value?

[plhrtr]

Okay after some tinkering i found a working but not optimal solution:

Using:

background-image: -gtk-icontheme("<icon-name>");

One can achieve every button-variant I mentioned above

For anyone who has the same problem here's a quick rundown:

• Set the label to an empty string

.top-bar > .menu-button-bar .widget-menubar-container:last-child button label {
  background-image:
    -gtk-icontheme("system-shutdown-symbolic"),
    -gtk-icontheme("go-down-symbolic");
  background-repeat: no-repeat, no-repeat;
  background-size: 20px, 16px;
  background-position: left, right;
  min-width: 40px;
}

.widget-volume label {
  background-image: -gtk-icontheme("audio-volume-high-symbolic");
  background-repeat: no-repeat;
  background-position: center;
  min-width: 18px;
  margin-left: calc(var(--spacing) / 2);
  margin-right: calc(var(--spacing) / 2);
}

When you have text inside the button as well, you could put the text inside the label and place the background on the left side, pad the text to right and translate the whole label back to center (Haven't came up with anything smarter yet)

Maybe this helps someone.

If there is a better solution, please let me know!