Help in adding symbolic icons to my application

[HamzaAlaoui]

Hi

well, first of all, i am really happy with the new gnome design and thanks to all of the developers, designers and contributors, i am really excited for the GNOME 40.

so i thought of contributing an application, and i needed some specific design of symbolic icons, i used “Symbolic Preview” application to setup the *-symbolic.svg… then design the icon in Inkscape…, and also i have took some icons from “Icon Library” application, i added the icons to my working data directory and loaded them successfully from resource path, but the problem i found is when i switch to dark mode in the application the icons doesn’t get recolored (just my custom icons, Adwaita symbolic icons are getting recolored successfully).

i have read (https://developer.gnome.org/hig/stable/icon-design.html.en), but it only shows how the design, it doesn’t show how to the process to add it the application and how exactly the recoloring process works.

so the goal, is i need to know the mistakes i have done in the above steps, and a brief explanation to get the task done.

thanks, for your help guys.

[p3732 (Peter Eisenmann)]

Hi @HamzaAlaoui!
I am no expert on this, but faced the same problem at some point and I resolved it by including the icons as resources and using reffering to them via their resource name. It might help to look at other apps written in the same programming language and how they do it.

[jensgeorg]

I think the key with SVG symbolic icons was

• always use fill, not stroke
• for highlight color to use an opacity of 35% of the fill color, not another color
• There are the three CSS classes “success”, “warning” and “error” (usally rendered to green, orange, red) which can be added using the XML editor in Inkscape

Check https://gitlab.gnome.org/GNOME/adwaita-icon-theme/-/blob/master/src/symbolic/gnome-stencils.svg, you might have to ungroup the icons to dive into their elements

As for adding them to your application, IIRC the key is to load them via the icon theme, not directly. i.e. by using gtk_icon_theme_add_resource_path when loading from resource or gtk_icon_theme_add_search_path when loading from disk, then using gtk_icon_theme_lookup_icon with the full name (foo-bar-symbolic) to load it.