Dijit TabContainer widget Icons

Question

Does anyone know, how to add an icon to the TabContainer widget? I chose the declerative example:

<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
   <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
      Lorem ipsum and all around...
   </div>
   <div dojoType="dijit.layout.ContentPane" title="My second tab">
      Lorem ipsum and all around - second...
   </div>
   <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
      Lorem ipsum and all around - last...
   </div>
</div>

But there is only a title attribute to set the title of the tab. How can i add a tag?

In this post, i found a solution to add a tag to the title:

I actually looked more into this and I found that this code works well:
<div id="mainTabContainer" dojoType="TabContainer" style="width: 100%; height: 100%"    selectedTab="tab1" >
<a dojoType="LinkPane" href="/path/to/pane/content" refreshOnShow="true" style="display:  none"><img src="path/to/your/image"/></a>

But the href attribute of the LinkPane confused me. I don`t need to link to another html document.

Answer 1

Take a look at the TabContainer demo. You can add icons to tabs by defining the iconClass:

<div id="tab3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 3",
iconClass:"dijitEditorIcon dijitEditorIconSave", closable:true'>

It simply tells the tab which CSS class to use for the icon. You don't have to use Dojo's theme classes, you can define your own classes in your stylesheet. See the CSS files in dijit/icons.

BTW, the TabContainer demo uses HTML5-style attributes (e.g. data-dojo-type) and you use the old ones (dojoType). They're both OK, but from my experience if you mix them, weird things may happen, so it's better to choose one style and use it consistently.