Creating Widget Icon

Maybe you already noticed that all widgets have icons on the upper left corner and most likely you would like to create icons for your widgets. This goal is achieved through little CSS trick that you can use effectively.

If you carefully red previous topics about widget development most likely you noticed that initial configuration parameters contains one parameter named “iconId”:

this.config = {
   name: 'googlesearch',
   title: 'Google Search',
   iconId: 'google'
}

Value of the mentioned parameter is just name of the icon's CSS class name. Widget engine uses this value for generating full CSS class name according to icon class name rules and assigns this value to the HTML elements class attribute.

Icon's class name has following format: wdg-icon-google. It is important to note that “wdg-icon-” prefix is required for all icon classes and the name off full class name is suffixed with unique name of the icon.

For creating your own icons classes you need to use CSS code like this:

.wdg-icon-myiconidentifier {
    background: url(mywidgeticons.png) no-repeat top left;
}

Now if you need to set this icon to your widget you need to do it with following way:

this.config = {
   name: 'googlesearch',
   title: 'Google Search',
   iconId: 'myiconidentifier'
}

Note again that for assigning icon to the widget you just need to use its name.