Problem

App vendors can currently place a link in the global navigation (system.header/left) and now in ADG3 you can optionally specify a custom icon (say a 48x48@2x PNG or SVG if you're particularly clever). This looks fantastic if Confluence is using the default color scheme (except in 1 case) however if it's customized it can have undesirable results (default-vs-custom-color-scheme.png).

"...in the global sidebar the icon seems grayed out...do you know why this is?" – Customer

This makes it difficult to make a connect app feel part of the new confluence experience and has confused people.

Technical details

Currently in ADG3 the icons Atlassian have in the global nav are SVG but are embedded in the DOM of the page and the custom color scheme is applied to them using CSS.

With App Vendor icons they are included in an <img> element which makes sense for a PNG, but even if an app vendor supplies a SVG it will still use a <img> tag which means it won't adopt the cascading styles of the custom color scheme (browser limitation).

Solution ideas

1. Detect if the vendor icon is a SVG and/or add a property in the app descriptor to specify explicitly it's an embeddable SVG. Sanitize the SVG markup and safely embed it directly into the page so it adopts custom color scheme CSS like the other icons do.
2. Send more information in the image HTTP request so a dynamic SVG icon can be generated using details from the lookandfeel REST API and properly cached server side and/or client side (Note: this wouldn't resolve the issue shown in 1-out-of-4-fail.png)

Current workarounds

1. Design an icon with a strong background and transparent shape cut out
   1. Looks better than the alternative
   2. Over emphasized due to differences in the visual design
2. Dynamically generate a SVG icon on request:
   (Parse the Referrer HTTP header to lookup the instance by name rather than a clientKey via a JWT token, get color scheme details via lookandfeel REST API, inject colors into a dynamic SVG response)
   1. Looks great in 3 / 4 situations
   2. Poor latency and the image can't be cached
3. Don't use a custom icon