Try it Live

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
     .search-box {
      width: 200px;
      position: relative;
     }
	 
     .searchtext {
      padding: 5px;
      height: 20px;
      border-radius: 5px;
      outline: none;
      float: left;
      width: 100%;
      border: 3px solid crimson;
     }
	 
     .search-btn {
      position: absolute;  
      right: -50px;
      width: 40px;
      height: 36px;
      border: 1px solid crimson;
      background: crimson;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
     }
    </style>
  </head>
  <body>
    <h2>Search Box Using Font Awesome Icons</h2>
    <div class="search-box">
      <input type="text" class="searchtext" placeholder="Search here">
      <button type="submit" class="search-btn">
      <i class="fa fa-search"></i>
      </button>
    </div>
    <br><br><br>
    <h2>Search Box Using Google Icons</h2>
    <div class="search-box">
      <input type="text" class="searchtext" placeholder="Search here">
      <button type="submit" class="search-btn">
      <i class="material-icons">search</i>     
      </button>
    </div>
  </body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
     .search-box {
      width: 200px;
      position: relative;
     }
     
     .searchtext {
      padding: 5px;
      height: 20px;
      border-radius: 5px;
      outline: none;
      float: left;
      width: 100%;
      border: 3px solid crimson;
     }
     
     .search-btn {
      position: absolute;  
      right: -50px;
      width: 40px;
      height: 36px;
      border: 1px solid crimson;
      background: crimson;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 18px;
     }
    </style>
  </head>
  <body>
    <h2>Search Box Using Font Awesome Icons</h2>
    <div class="search-box">
      <input type="text" class="searchtext" placeholder="Search here">
      <button type="submit" class="search-btn">
      <i class="fa fa-search"></i>
      </button>
    </div>
    <br><br><br>
    <h2>Search Box Using Google Icons</h2>
    <div class="search-box">
      <input type="text" class="searchtext" placeholder="Search here">
      <button type="submit" class="search-btn">
      <i class="material-icons">search</i>     
      </button>
    </div>
  </body>
</html>
​