How to set Image icon in joomla component backend sidebar

Question

I want to set icon in sidebar of joomla component backend JHtmlSidebar::addEntry(JText::_('USERS'),'index.php?option=com_users&view=users',$vName == 'users') is used to create this sidebar

Answer 1

My initial answer was for the menu, see below.

For the sidebar, the easiest answer is probably just adding custom css to the admin-theme. By default there are no classes on the sidebar menu items, but you can use the href-tag with attribute-selectors in css, like this:

/* For each item in the sidebar: */
a[href*="yourview"]{
  display: block; 
  padding: 0 0 0 20px;
  background: transparent url(link/to/img.png) 0 0 no-repeat;
}

It is also possible to override the sidebar output by copying the file /layouts/joomla/sidebars/submenu.php to the folder html/layouts/joomla/sidebars/submenu.php, and edit this file to display like you want it. More info is found here.

For the menu: It seems like you can add this to the definition of the administration menu in /administrator/components/com_componentname/componentname.xml, like this:

<administration>
  <menu img="link/to/icon.png" >COM_COMPONENTNAME</menu>
  <submenu>
    <menu link="option=com_componentname&amp;view=aview" view="aview"
    img="link/to/other-icon.png" alt="Componentname/Aview">
      COM_COMPONENTNAME_TITLE_AVIEW
    </menu>
  </submenu>
</administration>

If you actually want to hide the texts (not sure if I understood you right), you'll need to add some css to the backend theme, or to your component, to accomplish this. If you need to modify the backup theme, it's probably best to make a copy of the isis-theme, so your changes are not overwritten by joomla updates.

Answer 2

Finally I got Answer of this question Answer

JHtmlSidebar::addEntry('<span class="dashboard-submenuicon"></span>'.
            JText::_('Dashboard'),
            'index.php?option=com_mycomponent&view=dashboard',
            $vName == 'dashboard'
        );

We can write css code like

.dashboard-submenuicon{
           background-image:url('your_image_url');
            background-repeat: no-repeat;
            display: inline-block;
            height: 22px;
            vertical-align: middle;
            width: 22px;
            margin-right:5px;

}