jQuery UI Icons trouble - how do I get just the image displayed

Question

Using jQuery UI icons I just want to display the icon in line with the rest ("just display the icon, no line breaks etc.). Basically I want to get a row of clickable images, while I am using jQuery UI themes for my page.

Here some things I have tried:

1: <div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/>
2: <input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />

1: completely messing up the layout. 2: gives my an extra line break around the image

-- as request wider context --

 <tr class="ui-widget-content">
   <td>...</td>
   <td>
      <input name="xy" id="xy" type="text" size="5" />
      <input name="xz" id="xz" type="text" size="5" />
      <input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />
    </td>
  </tr>

-- span --

Using span leads to the same as above, icon is displayed but in its own line.

  <span class="ui-icon ui-icon-carat-1-n"></span>

Answer 1

I think the key is to make the icon containers display: inline-block.

<div style="display: inline-block" class="ui-state-default">
    <span class="ui-icon ui-icon-lightbulb"></span>
</div> 

See this example: http://jsfiddle.net/2U5TN/1/.

Also, you may find this page useful: http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html. It displays all possible icons you can use with jQuery UI CSS.