Custom Icon for Kibana App Category

amartin-layer3com · May 12, 2021, 8:20pm

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:

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.

Marius_Dragomir · May 13, 2021, 9:14am

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:

github.com

elastic/eui/blob/master/wiki/creating-icons.md

# Creating icons

EUI provides an ever-growing set of [icons][icons], but our set can be incomplete. If you find you need an icon that does not exist, create a new issue and tag it with the *icons* label. A designer from the EUI team will respond to discuss your needs.

If you are willing and able to design the icon yourself, this document describes the guidelines for designing a new icon, cleaning up the SVG, and getting it added to EUI. While designers on the EUI team are available to assist, we greatly appreciate your contributions and pull requests.

If you read through these guidelines or begin designing your icon and realize you're in too deep, then create an issue in this repo and request assistance. An EUI team member will reply and discuss options.

_**Note**: The `EuiIcon` component accepts external references to icon files, so you have the option to maintain the icon in your consuming application._

## Design the icon

From a content perspective, we've taken an approach of being open to many types of icons so long as they don't duplicate an icon that already exists. Stylistically, we have more stringent requirements outlined below.

### Content

While we're pretty much open to all requests, we ask that you first try to use an existing icon as this helps us avoid having multiple versions of the same glyph.  Likewise, if there is a universally known icon that represents an action, we recommend leveraging those existing patterns (e.g. a scissors for cut).

Finding and sharing reference icons is a great way to get moving if you're uncertain of the general shape. Post these examples to your issue and we'll provide feedback.

This file has been truncated. show original

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)

system · June 10, 2021, 9:15am

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