Existing icon (ex. wireless status icon) can't be written by a custom svg icon

[faru]

I'm expecting it to display a custom svg icon from the assets folder, but it seems that it uses GTK default icon, is it normal? If it does, then it would be great if it can overwrite the default GTK icon from the assets folder.

Here's the screenshot

I'm expecting "network.wifi.bind('icon_name')" would output the literal name it would output, like "network-wireless-signal-*-symbolic"

[faru]

The icon I'm using is the icon from Google's Material Icon

[kotontrion]

GTK will look for the icon first in the iconTheme, and only searches in the directories listen in the search path if it didn't find it in the iconTheme.

Two solutions come to mind.

1: You could rename the icons:

network.wifi.bind("icon-name").as(i => `custom-${i}`)

And rename the files to custom-networks....svg

2: create you own iconTheme
in assests directory create a new subdirectory called customIconTheme and put something like this into index.theme:

[Icon Theme]
Name=customIconTheme
Comment=Custom icons
Inherits=MoreWaita
Directories=symbolic

[symbolic]
Size=16
MinSize=16
MaxSize=512
Type=Scalable

In your config:

App.config({
  iconTheme: "customIconTheme",
  icons: "./assets"
})

customIconTheme is just the name of your custom icon theme and can be whatever
The specified theme in the inherits field will be used to look up icons not included in your custom theme.

I had the same issue while ago and looked into how gtk searches for icons and created solution 2. But I don't really recommend it.

[faru]

So it's indeed normal. I tried look for a workaround to change the existing output name for it and got tired for it. Thanks for the solution!