title: Using a custom rectangular icon in button in jquery mobile
body: <p>I have to use a custom icon in a button in jquery mobile.I have the icon with me and it is coming in the button.But the problem I am facing is,the default circle is appearing around my icon.I need to remove this border circle and just show the icon as it is.How to fix this issue?</p>
  
  <p>This is the html I have:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width; initial-scale=1.0" /&gt;
          &lt;link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"&gt;&lt;/script&gt;
             &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role="page" id="home"&gt;
              &lt;div data-role="header" data-theme="b"&gt;
                  &lt;h1&gt;Test&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div data-role="content" data-theme="b"&gt;
                  &lt;input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div data-role="footer" data-position="fixed" data-id="pFooter"&gt;
                 &lt;h1&gt;Test&lt;/h1&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the following CSS:</p>
  
  <pre><code>.ui-icon-save-icon{
      background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
  }
  </code></pre>
  
  <p>You can see it here - <a href="http://jsfiddle.net/yPRpt/" rel="nofollow">http://jsfiddle.net/yPRpt/</a></p>
  
  <p>Please note that the icon is missing,but you can see the circle in the example.</p>