title: Add svg icon into button with css/html?
body: <p>I want to have the icon displayed inside the button tag, see code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header-search {
    width: 200px;
    background: @header-color;
    color: white;
    font-size: 12pt;
    border: 0px solid;
    outline: 0;
    vertical-align: -50%;
  }
  
  #header-search::-webkit-input-placeholder {
    color: white;
  }
  
  #search-button {
    background: #FFFFFF;
    vertical-align: -50%;
  }
  
  .header-view-logo {
    vertical-align: middle;
  }
  
  #search-icon {
    fill: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="search-button" /&gt;
  &lt;svg id="search-icon" class="search-icon" viewBox="0 0 24 24"&gt;
      &lt;path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/&gt;
      &lt;path d="M0 0h24v24H0z" fill="none"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the icon is just displayed all over the place really big one, how can i get it to fit inside the button ?</p>