title: How to add custom button to Bootstrap Input
body: <p>The closest I can find is:</p>
  <pre><code>input[data-icon] {
    padding-left: 25px;
    background: url(&quot;https://static.thenounproject.com/png/101791-200.png&quot;) no-repeat left;
    background-size: 20px;
  } 
  </code></pre>
  <p><a href="https://i.stack.imgur.com/WYJZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WYJZj.png" alt="Search Button" /></a></p>
  <p>But this icon will be removed once the JQuery's validation icon appears.</p>
  <p>I knew Bootstrap input group can prepend and append icons, but those icons had already been reserved for other usage (in my project).</p>
  <p>Besides, I wish the added icon is clickable as well. Added as a background image doesn't work.</p>