title: Material icon inside search text in angular JS
body: <p>I want the search icon to be inside of the search box but it is showing below it. 
  Here is the code,</p>
  
  <pre><code>&lt;section class="example"&gt;
              &lt;section class="search-container"&gt;
                  &lt;input  type="search" id="sampleSearchInput" &gt;&lt;i class="material-icons"&gt;search&lt;/i&gt;
              &lt;/section&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>CSS code-</p>
  
  <pre><code>input[type="search"] {
      padding-right:32px;
  }
  
  .search-container {
      position:relative;
      width:20%;
      margin-left:55%; 
  
   }
  
  .search-container &gt; input[type="search"] + span {
      position:absolute;
      top:12px;
      right:10px;
  }
  </code></pre>
  
  <p>What could possibly be wrong?</p>