title: how to change button icon on click?
body: <p>I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle). </p>
  
  <p>Here is my button CSS code:</p>
  
  <pre><code>.w8-button {
      display: table;
      padding: 7px 15px 8px 15px;
      border: none;
      font-family: "open_sans_lightregular";
      font-size: 13px;
      font-weight: bold;
      cursor: pointer;
      opacity: 0.9;
  }
  </code></pre>
  
  <p>and here is CSS icon code:</p>
  
  <pre><code>.w8-button.iconize {
      padding-right: 50px !important;
      background: url(D:/firstPicture.png) no-repeat 115px center;
  }
  </code></pre>
  
  <p>And this is how I call my button in html:   </p>
  
  <pre><code>&lt;li&gt;
    &lt;input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)</p>