How to use my own symbolic icon?

[DarkTrick]

Can someone write down a recipe how I could use my own symbolic icons as part of a theme? My goal is to use icons, that adapt to theme coloring (dark / light).

What worked so far

1. use glib-compile-resources to generate a resource.c/resource.h file.
   
   xml-content:
   

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

2. successfully load and show the svg as icon:
   

ress = resources_get_resource ();
g_resources_register (ress);
GtkWidget * icon = gtk_image_new_from_resource ("/org/gjiten/data/aaaa-symbolic.svg");

But this will not load the icon as part of the theme; Therefore the icon will not be theme-aware.

This is where I’m struggling

Instead of using gtk_image_new_from_resource, I tried the following to make the icon part of the theme:

GtkIconTheme * theme = gtk_icon_theme_get_default ();
gtk_icon_theme_add_resource_path (theme, "/org/gjiten/data");

// check if icon is available
gtk_icon_theme_has_icon (theme, "aaaa");


// make icon usable on UI
icon = gtk_image_new_from_icon_name ("aaaa",32);

// or something like this:
GtkIconInfo * icon_info = gtk_icon_theme_lookup_icon (theme,"aaaa", 32 ,GTK_ICON_LOOKUP_FORCE_SYMBOLIC);
GdkPixbuf * pixbuf = gtk_icon_info_load_icon (icon_info, NULL);
icon = gtk_image_new_from_pixbuf (pixbuf);

However,

• gtk_icon_theme_has_icon will always return FALSE.
• gtk_image_new_from_icon_name can’t find the image
• gtk_icon_theme_lookup_icon returns NULL

Can someone tell me what I am doing wrong?

References

• GResources: GResource: GIO Reference Manual
• Symbolic icons: Themed Icons - GNOME Developer Documentation documentation

[fmuellner (Florian Müllner)]

@DarkTrick

// check if icon is available
gtk_icon_theme_has_icon (theme, "aaaa");

As far as I can tell, gtk_icon_theme_has_icon() only checks for the exact icon name without fallbacks. That is, aaaa-symbolic is not the same as aaaa.

(It would also be better to use a valid icon theme path like scalable/actions instead of placing the icon the the toplevel)

[DarkTrick]

Thank you for the quick reply!

As far as I can tell, gtk_icon_theme_has_icon() only checks for the exact icon name without fallbacks.

Good to know! Probably a good idea to add this to the docs, if it’s true.

Anyways, I edited my code, where I’m trying to make use of the icon. In the end, I don’t need _has_icon(). I just thought it’d make the code shorter.

It would also be better to use a valid icon theme path like scalable/actions instead of placing the icon the the toplevel

I have no idea how I would set something like that up. I’d say, because my resource file says prefix="/org/gjiten/", it should not be toplevel.
However, from your wording I infer, that this is not a necessity and can therefore be postponed.

[fmuellner (Florian Müllner)]

@DarkTrick

my resource file says prefix="/org/gjiten/", it should not be toplevel.

I meant toplevel relative to the resource path registered with gtk_icon_theme_add_resource_path().

That is, it would be better to move the icon to “/org/gjiten/data/scalable/actions” (assuming the same resource path).

[DarkTrick]

I found a typo in my file, corrected it and the following version now shows the icon. (I would skip putting the icon in a different level.)

  ress = resources_get_resource ();
  g_resources_register (ress);

  GtkIconTheme * theme = gtk_icon_theme_get_default ();
  gtk_icon_theme_add_resource_path (theme, "/org/gjiten/data");

  GtkIconInfo * icon_info = gtk_icon_theme_lookup_icon (theme,"aaaa", 64 ,GTK_ICON_LOOKUP_FORCE_SYMBOLIC);
  GdkRGBA fg = {1.0,0.0,0.0,0.0}; /* testcolor*/
  pixbuf = gtk_icon_info_load_symbolic (icon_info, &fg, NULL, NULL, NULL, NULL, NULL);
  icon = gtk_image_new_from_pixbuf (pixbuf);
    

However, the icon is still not color-theme-aware. Is there something I’m overseeing?

edit: I just discovered this passage in the docs:

[…] the icon loaded needs to […] use the “fg”, “success”, “warning” and “error” CSS styles in the SVG file itself.

I didn’t do that. I just used color #000000. Could this be the problem?
How do I solve this? Where would I set the css styles of the svg to fg ?

OT: Btw. I also figured out, that the call icon = gtk_image_new_from_icon_name ("aaaa", GTK_ICON_SIZE_DND); would only succeed, if the theme was received with gtk_icon_theme_get_default(). It would show a broken image, if the theme was created with gtk_icon_theme_new ()

[DarkTrick]

I summarized everything and all steps with full source code in the Wiki here:

https://wiki.gnome.org/HowDoI/CreateSymbolicIconsThatChangeColorAccordingToTheme

[vanadiae]

All the informations to bundle and use your own symbolic icon (or ones that aren’t in adwaita-icon-theme like the icon-development-kit ones) are given in the Icon Library app, when you choose an icon there and choose to “include [it] in your application”.