Widget.Icon SVG ignoring CSS color

[seve-andre]

I have a Widget.Button with a Widget.Icon inside it (the icon is a local SVG), but the icon's color isn't following the CSS styles.

Python Widget

import os
from ignis.widgets import Widget

icons_folder = os.path.expanduser("~/.config/icons")


def notifications() -> Widget.Button:
    return Widget.Button(
        css_classes=["notifications"],
        on_click=lambda x: print(x),
        child=Widget.Icon(
            css_classes=["notifications-icon"],
            image=f"{icons_folder}/bell-filled.svg",
            pixel_size=16
        )
    )

CSS

.notifications-icon {
    color: #fff;
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z" />
</svg>

[linkfrg]

I also tried this some time ago and couldn't get it working. But after some searching now, I just found this. Looks like Widget.Icon is missing something in the current implementation, so I will try to fix this

[linkfrg]

Okay, i found the solution.
You need to:

1. Put your icons in the directory with the special name (e.g., data/icons/scalable/actions)
2. Create resources.xml with content like this:

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/org/myapp/">
    <file>data/icons/scalable/actions/aaaa-symbolic.svg</file>
  </gresource>
</gresources>

Replace aaaa-symbolic.svg with the actual icon name.
3. Compile this gresource with glib-compile-resources ./resources.xml
4. Register the gresource in the config:

from gi.repository import Gio

resource = Gio.Resource.load("PATH/TO/COMPILED/resources.gresource")
Gio.resources_register(resource)

5. Add the resource path to the Gtk.IconTheme:

from gi.repository import Gtk, Gdk

icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default())
icon_theme.add_resource_path("/org/myapp/data/icons")

6. and FINALLY, you can use your icon by passing its name:

Widget.Icon(image="aaaa-symbolic")

and it will support changing color with CSS

I don't even know how someone could come up with that, but GTK is continue being GTK

[linkfrg]

Oh, wait, after 1 month i found better solution

It's amazing, but if you add just one directory to the icon path, you don't have to bother with gresource and can simply add a search path to Gtk.IconTheme

1. You can create a directory with any name, it must contain hicolor/scalable/actions directory. In this example I will use icons/hicolor/scalable/actions
2. Put your icons in actions
3. Use this code:

from gi.repository import Gtk, Gdk

icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default())
icon_theme.add_search_path("PATH/TO/icons")

EDIT: #53 is merged, now you can use the IgnisApp.add_icons() method

[seve-andre]

I tried IgnisApp.add_icons() as stated here, but the CSS color is still not being applied. Is this intentional?

[linkfrg]

The name of the icon (also the filename) must ends with -symbolic for the CSS color to be applied

[seve-andre]

Thank you, adding -symbolic helped with CSS. I thought it was possible to give it any name, based on what's written here. I suggest clarifying this to avoid confusion.

Thank you so much again for your work!

[linkfrg]

I suggest clarifying this to avoid confusion.

Done in 34bfdbd