Uncontrolled tool window Icon behavior

IntelliJ Platform
,
1

Hey!

I have a question about the Tool Window’s icon behavior, but I think it should work more commonly.

Icon of a window on the editor’ sides works like this:

Inactive state

image

Icons just present, no more

Inactive + Hovered state

image
image300×518 21.1 KB

Actually, there are no Active + hovered state

Active state

image
image262×528 6.59 KB
image
image314×426 20.3 KB

Plus hovered, but there are no changes

Inactive, focus changed from the window

image
image2334×726 51.1 KB

I just opened another window (structure view)

Database still open, but inactive. Same as hovered effect

Build-in windows looks great in all states, but custom windows….

Hovered

image
image328×158 15.5 KB

Active

image
image162×124 1000 Bytes

Inactive

image
image174×138 983 Bytes

Dark active

image
image158×258 2.62 KB

Dark inactive

image

I have the pot icon for dark and light themes, they’re named as pot.svg and pot_dark.svg

I set the icons in the plugin.xml file:

<extensions defaultExtensionNs="com.intellij">
    <toolWindow
            factoryClass="com.github.xepozz.php_dump.CompositeWindowFactory"
            id="PHP Dump" anchor="right" secondary="false" icon="/icons/pot.svg"/>
</extensions>

I looked through the plugin development documentation, SDK and sources.

I cannot find the way to change the icon in the active state.

Has somebody faced the same issue? Any ways to solve it?

2

Could you compare your icons to the standard ones in SVG? We usually do 4 icons for tool windows: 2 of 16x16 size and 2 of 20x20 size with some predefined colors. You can find source SVGs on the intellij-community repository

P.S. please avoid filled areas in tool window icons, they look out of place

3

In this example, you can see how it is done.

toolwindow

In light theme:

image
image1222×644 46.5 KB

image
image802×303 34.1 KB

Read about colors here

object ComposeIcons {
    @JvmField
    val ComposeToolWindow =
        IconManager.getInstance().getIcon("/icons/composeToolWindow.svg", javaClass.getClassLoader())
}

And in plugin.xml:

        <toolWindow factoryClass="org.jetbrains.plugins.template.toolWindow.ComposeSamplesToolWindowFactory"
                    icon="org.jetbrains.plugins.template.ComposeIcons.ComposeToolWindow"
                    id="ComposeSamples"/>
4

One can also find a suitable tool window icon in our gallery

image
image2126×1880 256 KB

5

@yuriy.artamonov thanks for such quick reply. It really works great!

I’ve just moved fill=”…” attribute from the main <svg> tag into a child and the problem is solved.

Would be great to highlight that point in the icons documentation.

6

I’m just replying for the benefit of any future readers. I ran into this issue too and spent way too much time trying to get icons to show properly.

To resolve the issue I had to manually edit and simplify the markup in my svg file to make it work. I am not exactly what combination of things resolved it, but it did start working for me. I removed clipping masks, expanded strokes, moved from style attributes to fill=“…”. etc.