Custom Icon for Kibana App Category

Elastic Stack Kibana
1

Our business uses a simple in-house kibana plugin to present dashboard links in the sidebar. Here is an image illustrating how this might look:

link-plugin-without-logo
link-plugin-without-logo537×907 45.4 KB

To get this to work, we have an custom AppCategory in our plugin:

    const WIDGET_CORP_CATEGORY: AppCategory = {
        id: 'widgetcorp',
        label: i18n.translate('core.ui.kibanaNavList.label', {
          defaultMessage: 'Widget Corp. Category',
        }),
        order: 500,
      };

And then, when calling core.application.register():

    core.application.register({
      ...
      category: WIDGET_CORP_CATEGORY,
      ...
    });

This works, but I have not been able to figure out how to add a custom icon for the AppCategory. AppCategory accepts an optional euiIconType field, but as best I can tell, this must be a string from a special wired-in list: iconKibana, iconManagement, etc. I've tried grepping through the kibana source for fragments of the svgs that correspond to these (e.g. M16 21a5 5), and they all come from this file:

x-pack/build/plugin/kibana/x-pack/plugins/canvas/shareable_runtime/build/kbn_canvas.js

Unfortunately, this file is minified and is a dead end.

I would like to be able to add my own svg icon for the AppCategory that our plugin creates. Is this supported, and if so, how can it be accomplished? Thanks.

Editing to include version information: We use Elasticsearch and Kibana version 7.12.1.

2

Hello, I'm pretty sure the icons from the EUI package, the Canvas ones are packaged there to be used as "word art" in Canvas dashboards.
here is the EUI repo:

And there is a readme on how to create an icon:

I guess you'd have to build a version of EUI of your own, and replace the changed file for the icons in you Kibana install (have never done it until now, but it should work)

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.