Ability to configure a menu label icon for SBA UI extension

[konstantinMinkov]

I've been working on a UI extension and didn't find any way to configure an icon for it. It's not a big problem, but label looks a little bit out of place in the side menu (see Extension 1 on the screenshot):

After some source code investigation, I discovered that menu icons are configured via static map:

spring-boot-admin/spring-boot-admin-server-ui/src/main/frontend/views/index.ts

Lines 39 to 53 in e4d7cc8

	export const VIEW_GROUP_ICON = {
	[VIEW_GROUP.WEB]:
	'<svg aria-hidden="true" focusable="false" data-prefix="fas" class="w-4 h-4 mr-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg>',
	[VIEW_GROUP.INSIGHTS]:
	'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
	[VIEW_GROUP.DATA]:
	'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>',
	[VIEW_GROUP.JVM]:
	'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
	[VIEW_GROUP.LOGGING]:
	'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>',
	[VIEW_GROUP.NONE]: '',
	[VIEW_GROUP.SECURITY]:
	'<svg xmlns="http://www.w3.org/2000/svg" class="h-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>',
	};

So it doesn't look like there is a way to extend it.

It would be nice to have an ability to provide an icon in SBA extension config.

My suggestion is to be able able to either provide it as a full html string:

SBA.use({
  install({viewRegistry}) {
    viewRegistry.addView({
      ...
      icon: '<svg xmlns="http://www.w3.org/2000/svg" class="h-5  mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>'
    });
  }
});

Or just an svg path for more safety and control on the SBA side:

SBA.use({
  install({viewRegistry}) {
    viewRegistry.addView({
      ...
      icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'
    });
  }
});

Please let me know if you need more details.

[SteKoe]

Hi @konstantinMinkov,

we have implemented the feature you requested. Beginning from next release it will be possible to set or override group icons by using the new function SBA.viewRegistry.setGroupIcon(name: string, icon: string) as shown here.

We decided to not add an icon property to a view, but groups in general. Hence, you have to set the group property of your views and then set an icon for the group using the function mentioned above.
If you do not want to set a specific group name, you can also override the icon for the default group called none.

Regards
SteKoe