title: Place a icon-button inside jQuery Mobile list divider
body: <p>I'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with <strong><code>data-role='list-divider'</code></strong> assigned.</p>
  
  <p>Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so:
  <img src="https://i.stack.imgur.com/Tr5qZ.png" alt="goal"></p>
  
  <p>The point is, I'd like to place the info icon (with <code>data-icon='info'</code> or <code>class='ui-icon-info'</code>) within the list-divider, while maintaining consistency in the overall style, i.e.:</p>
  
  <ol>
  <li>The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.</li>
  <li>The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.</li>
  <li>The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.</li>
  </ol>
  
  <p>I'd preferably like to achieve this <strong>without any CSS customizations or JavaScript fiddling, using data-attributes only.</strong></p>
  
  <p>This is what I got (using jQuery Mobile 1.3.2):</p>
  
  <ol>
  <li><p>List-item with data-icon: </p>
  
  <p><code>&lt;li data-theme='a' data-icon='info'&gt;&lt;a href='#' onclick='alert("Some info...");'&gt;Category: A&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p><img src="https://i.stack.imgur.com/yl2xc.png" alt="Approach 1"></p>
  
  <p>Result:</p>
  
  <ul>
  <li>Correct appearance of info-icon</li>
  <li>Wrong appearance of category, because a normal list-item is used instead of a list-divider</li>
  </ul></li>
  <li><p>Using a list-item with <code>data-role='list-divider'</code> assigned:</p>
  
  <p><code>&lt;li data-role='list-divider' data-icon='info'&gt;&lt;a href='#' onclick='alert("Some info...");'&gt;Category: A&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p><img src="https://i.stack.imgur.com/Y3IM0.png" alt="Approach"></p>
  
  <p>Result:</p>
  
  <ul>
  <li>No icon at all</li>
  <li>Wrong title appearance and only text is hyperlinked instead of the whole list-item</li>
  </ul></li>
  <li><p>List-divider with info-button inside:</p>
  
  <p><code>&lt;li data-role='list-divider'&gt;Category: A&lt;a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'&gt;Category: A&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p><img src="https://i.stack.imgur.com/ONO9v.png" alt="Approach 3"></p>
  
  <p>Result:</p>
  
  <ul>
  <li>Info button has wrong appearance
  
  <ul>
  <li>The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing <code>data-role='button'</code> doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.   </li>
  <li>The icon's position is not on the right side. I know it would be possible using <code>data-iconpos='right'</code>, but I used this attribute for the icon-only (<code>notext</code>) layout already.</li>
  </ul></li>
  <li>Category appearance is not pleasing, as the button increased its height. Even <code>data-mini='true'</code> didn't help. </li>
  </ul></li>
  </ol>
  
  <p>I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.</p>