Changing the look of toolbox widget icons

If you make custom widgets, I’d bet they look like this in the toolbox

So that tells no story at all…

What you need to do is in your ControllerToolboxItem attribute, implement the CssClass property

BOOM, yeah… pro stuff right there, no more stupid dotted box

So 2 things of note here

1. sfMvcIcn: This is the little blue MVC annotation
2. sfImageLibraryViewIcn: WTF!? Okay so all of the existing OOTB toolbox widgets are one big-ass sprite.  The backend breaks that up with these special classes which are not documented anywhere I know about.  So just right-click on the toolbox items icon you want, click Inspect and let the chrome inspector tell you the class name.
3. If you add this property to an EXISTING TOOLBOX widget nothing will change, you need to manually edit the ToolBox.config to add the class.  If this is a NEW widget being registered into the toolbox… it’ll insert for you.

Pay special attention to the “.RadDock .rdTable .rdTitleBar div” entry in the sidebar, it has a WebResource.axd link to the ACTUAL sprite being used… fun to look at.  Maybe you’ll find a new asset not in yet in SF or something 😊

An aside

You aren’t limited to using these icons or classes.  The entire backend is loaded in the same frame.  So your page template could load in (in design mode) a custom css file with your own icon class names to use.  This is just the easy button…