How to use custom icons inside kibana custom plugin ?

[arulselvan]

We need to load custom icons inside our custom kibana plugin , but as per your documentation (https://elastic.github.io/eui/#/display/icons), we put icons in following path of our plugin.

New icons should be placed in the /icons/assets/.

is it correct ? or please guide me how to load custom icons.

Thank you!
Arul

[snide]

EuiIcon does not currently support custom icons. It's on our near term roadmap #1398

Currently any icons that need to be added to EuiIcon would need to require a build of EUI and have that build imported into your version of Kibana. If you're just looking to have your app icon show up in the Kibana sidebar, you can use the icon property and point to a file within your local version of Kibana. Kibana will use that icon if no EuiIcon is present.

https://github.com/elastic/kibana/blob/master/x-pack/plugins/uptime/index.ts#L25-L26

[arulselvan]

Thank a lot @snide for your prompt reply

[snide]

Closing this in place of #1702 which better explains the issue.

[parikshitgawali]

Hi @snide ,
icon property is not working 7.7.x onward . eui css styles are not imported for custom icon. due to this icon looks inappropriate . Could you help me with this ?

[cchaos]

@parikshitgawali Can you please explain more of your implementation so we can troubleshoot?

[parikshitgawali]

Hi @cchaos ,
My implementation is working fine till 7.6.x release. I am facing issue while migrating plugin to 7.7.x. I have attached my plugin screenshot of custom plugin icons. It looks bigger than default EUI icons. As per my analysis 'class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded euiListGroupItem__icon"' is not getting included for custom icon which are implemented using Icon property.

uiExports: {
app: {
title: 'SIP Analyzer',
description: 'An Awesome Kibana SIP Plugin',
main: mainFile,
icon: 'plugins/sip/resource/logo-scaled.png',
}
},

Html tags for custom plugin icon where above mention classes are not includes:

SIP Analyzer

plugin : https://github.com/BroadSoft-Xtended/BroadWorks-Dashboards-and-Discovery/blob/master/SIP-2.4.0_K_7.6.2.zip

Older version :

[cchaos]

@parikshitgawali This is actually an implementation problem with Kibana's nav and I have opened an issue in their repo referencing your comment elastic/kibana#69691