Custom svg ignores fill value

[TaNorbs]

Hi, i tried to import a custom svg (this for example https://lucide.dev/icons/search, or https://lucide.dev/icons/book), and it gets filled with whatever the color css property is, but the stroke color stays black. If i make the color transparent, then stroke becomes transparent as well. Also tried setting fill: none on the component in the css property without any success. The same happens, when i tried an icon from Heroicons or glyphs.fyi. Even the colored ones.

It seems as if it ignores the fill value. I dont know whether this behaviour is intended or not, but i would hope that its just a bug.

I am just importing it like in the example under common issues, so App.addIcons(...). Using sass & ags v1.8.0.

[Aylur]

have you by chance forgot to name the files as <name>-symbolic.svg?

[TaNorbs]

No, i did not forget it. Everything was named like that. I added the svg as search-symbolic.svg in a top folder called assets. used the App.addIcons(...) as above mentioned. Then used like this:

Widget.Icon({  
    icon: "search-symbolic",
    size: 32
})

I am sure, it tried to render this svg, not something else. I tried it with this as well: https://glyphs.fyi/dir?i=battery50&v=poly&w , and the fills were just whites.

[darkyelox]

@TaNorbs I had problems with SVG as well, I downloaded mine from https://icones.js.org/ as SVG, this SVG files has the fill value as "currentColor" so I researched and as you said we should use the -symbolic suffix in the file names, but I also discovered that I can register my own folder for searching for icon files, so what I did:

1. Register a folder with your custom icons, I did this on my main.ts ( I'm using TypeScript btw so I import my compiled main.ts into my config.js ) file before the app config:

// main.ts file
import Gtk from "types/@girs/gtk-3.0/gtk-3.0";

// using App.addIcons worked for me
App.addIcons(`${App.configDir}/images/icons/`)

// But you can also try
Gtk.IconTheme.get_default().append_search_path(`${App.configDir}/images/icons/`)

// App.config ...

2. then I used as normal with just the file name

const SoundIndicator = Widget.EventBox({
    child: Widget.Icon({
        css: 'font-size: 20px;',
        icon: `ic-volume-down-symbolic`,
    })
})

example svg file for you to test:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02M5 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L9 9H6c-.55 0-1 .45-1 1"/></svg>

@Aylur this should be more explicit on the Wiki, maybe as a side note on the Icon Widget or as example code

[TaNorbs]

With this icon, from @darkyelox, the fill works if its name ends with symbolic. It changes when i change the color css property.

Then i tried with another one, which contained fill values, removed symbolic from the end, then the these values actually come from the svg, and the color property is ignored from the css.

Sidenote: the console emits warning for missing icon names for the ones which are manually imported, but they are being rendered.

[fxzzi]

I've tried grabbing icons from https://icones.js.org/ as suggested by @darkyelox however I'm still having issues with the icon's filling.

here's an example svg:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/></svg>

i've tried changing fill to currentcolor and removing the stroke, it didn't help.

[HiImJulien]

So, I've had this issue too, while using Lucide's Power Icon. I could observe following behavior:

• GTK CSS doesn't support stroke; the stroke color can only be changed in the SVG itself. (Correct me, if I am wrong!)
• When setting the CSS color, then this will be set as fill color regardless of value specified in the SVG.

EDIT:

So, I just found this on Gnome's Wiki:

Be aware of the following:

• Only fill colors can become theme-color-aware. Stroke colors will not become theme-color-aware.
• ...