Customize the sidebar icons

[lentilz]

Summary

I am attempting to customize the sidebar label of only specific items. I have used the api's renderLabel to customize the label text however what I would like to do is replace the document icon next to the label to a SVG i have in my project directory or use Storybook's library icons.

addons.setConfig({
	sidebar: {
		renderLabel: ({ name, type }) => (name === 'Mobile Library' ? MobileIcon + name : name)
	}
});

renderLabel only targets the item.name and not the parent elements.

I've been able to force it via css by adding a pseudo-element in .storybook/manager-head.html, but ideally this would be a direct replacement of the document icon itself so I can update the svg fill based on if the item is active or not.

Additional information

No response

Create a reproduction

No response

[MichaelArestad]

Howdy! I'm the designer for Storybook. Can you please provide us with your use case to help us determine whether to allow customization of the icons or not? Thank you!

[lentilz]

It was to make the sidebar more scannable and highlight our mobile libraries. I ended up solving for it via CSS instead: