Support for accent color in symbolic icons?

Development
1

Hello,

I am not a regular forum user, so thank you for your understanding.

I’m try to work on a GNOME application using GTK4 and libadwaita, and I have a question regarding symbolic icons and accent colors.

As far as I understand, symbolic SVG icons in GTK support: currentColor, success, warning, error

However, there does not seem to be support for using the system accent color within a symbolic icon.

My use case is the following:
I would like to use a single SVG symbolic icon where:

  • most of the icon follows curernt color

  • specific shapes (for example, small indicators or dots) follow the system accent color

I’m trying to keep my application consistent with GNOME design principles, do you have any advise to realise that simply ?

Thank you in advance for your support

2

Hi,

There are new capabilities for symbolic icons introduced in the brand new gtk-4.22 (basically still svg, but with custom sugar on top) that allows to use accent as color name.

Looks like this for a <path>, here the stroke uses the accent color, with a fallback rgb(0,34,255) if not available:


  <path
          id='path2'
          class='transparent-fill foreground-stroke'
          fill='none'
          stroke='url(#gpa:accent) rgb(0,34,255)'
          stroke-width='2'
          stroke-linecap='round'
          stroke-linejoin='round'
          d='M 3.35731 4.84911 C 3.35731 4.84911, 4.20074 2.59336, 6.5149 2.59336 C 10.4928 2.59336, 11.1144 15, 7 15 C 5.27144 15, 4.40984 13.6289, 4.40984 12.1803 C 4.40984 8.72578, 9.89965 4.8789, 12.1466 5.97699 C 13.7715 6.77114, 12.458 10.4885, 12.458 10.4885 C 12.458 10.4885, 12.6536 8.12563, 14.9351 7.10487'
          gpa:stroke-minwidth='0.5'
          gpa:stroke-maxwidth='4'
          gpa:stroke='accent'
          gpa:states='0 3'
          gpa:transition-type='animate'
          gpa:transition-easing='ease-out'
          gpa:transition-duration='500ms'
          gpa:transition-delay='500ms'>
  </path>

See the docs: Gtk – 4.0: Symbolic Icons
Also some blog posts mention the new icons format: https://blog.gtk.org/

3

Hi Gwillems,

Thank you very much for your feedback and you help

It s a good news I will wait Fedora 44 next month to test that

Thank you again

5

Hi Gwillems,

I just switched to Fedora 44.
I tried modifying the file below based on your recommendations, but I’m encountering a problem.

<svg
        xmlns='http://www.w3.org/2000/svg'
        xmlns:svg='http://www.w3.org/2000/svg'
        id='svg1'
        width='16px'
        height='16px'
        viewBox='0 0 16 16'>
  <rect
          id='rect2'
          fill='rgb(46,52,54)'
          stroke-width='4.64638'
          x='0'
          y='9'
          width='2'
          height='7'>
  </rect>
  <rect
          id='rect2-6'
          transform='rotate(-90, 0, 0)'
          fill='rgb(46,52,54)'
          fill-opacity='1'
          stroke-width='4.64638'
          x='-2'
          y='9'
          width='2'
          height='7'>
  </rect>
  <path
          id='path1'
          fill='url(#gpa:accent) rgb(0,34,255)'
          fill-opacity='1'
          fill-rule='evenodd'
          d='M 9 0 A 9 8.99239 0 0 0 0 8.99414 A 9 8.99239 0 0 0 0 9 L 2 9 A 7 7 0 0 1 2 8.99414 A 7 7 0 0 1 9 1.99414 L 9 0 Z'>
  </path>
</svg>

The segment color changes to the defined RGB color but doesn’t follow the system’s accent color.

I also tried using the icon editor, but I got the same result.

Do you have a solution to fix the problem?

Thank you in advance for your help

6

Looking at the docs it seems that for symbolic icons only foreground/success/warning/error are supported in symbolic icons, not accent…

Does your icon have a -symbolic.svg suffix in its name? If yes try to just use .svg.
You may have to add fill='url(#gpa:foreground)' to the non-accent paths so they can get recolored.

7

Icons are currently in process of being replaced with a new system, that’s why everything is confusing. Accent support was itself added recently, and there is an old icon system and a new icon system (and a hybrid of old and new, aka old system but with stroke and accent support)

In theory there are 2 ways to do this, the old system supports class='accent' but it doesn’t seem to work in my testing. It did at some point, but ig it broke.

The new system (the gpa thing) works but you need nightly GTK (in theory 4.22 has it but it doesn’t seem to work in my testing, it’s possible that icon editor output just changed so much newer icons don’t work with 4.22 anymore) and it’s currently very new and experimental - doesn’t update when you change accent (I’ll file a bug), and icon editor crashes a lot. Overall I wouldn’t recommend using it just yet.

We’ll have a new icon system in libadwaita later, using gpa icons, and there will be an announcement detailing everything once that happens. Until then I’d just use older icons and override one of the other classes to be accent from CSS:

your-icon {
  -gtk-icon-palette: error var(--accent-bg-color); /* or --accent-color, idk which one you want here */
}