How to use gtk themed icons

[ryan-griffin]

I am trying to use the symbolic icons provided by the gtk icon theme. I am not sure how I would achieve this other than using the image widget with a path to the svg located in /usr/share/icons/. The problem with this is that the icon will always be black and won't use the color defined by the gtk theme (ex. A dark gtk theme should have light colored icons).

[LokiNaBoki]

It took me some time, but at the end I managed to find a solution.
Basically it boils down to using -gtk-icon-source css property.

I made a simple wrapper to make it easier to use:

(defwidget icon [name ?class]
    (image
        :class {"icon ${class}"}
        :style "background-image: -gtk-icontheme('${name}');"
    )
)

You can use it like this:

(icon :name "clock-applet-symbolic")

Icon is properly changed on icon theme change.
You can change color of the icon by setting color property for it's node.

As a side note, if you want to find all icons you can use look in /usr/share/icons/THEME, where THEME is your active theme (gsettings get "org.gnome.desktop.interface" icon-theme). What you want to use is name of the file (without path or extension).

[mantacid]

This is super helpful! As a bonus, the icons can get styled with the color scss attribute!

[mantacid]

Okay so that isn’t the case. My bad. My guess is there’s some GTK CSS thing that can do it, but hell if I know. If you don’t mind jank, you could see if you can apply post processing filters to the image either with css or some other method.

[LokiNaBoki]

Well, I'm not sure what you mean. I have added (icon :name "clock-applet-symbolic" :class "color_test") to my bar and .color_test { color: #FF0000; } to the scss file. The icon changed color from white to red.

[mantacid]

Huh. Then what was I doing wrong?