I got the icon from this icons open project.

I added the svg icon tag at _includes/header.html (at the end of the for loop, inside the trigger class div).

<!-- _includes/header.html -->
<!-- ... -->
{%- assign default_paths = site.pages | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths | reverse -%}
<!-- ... -->
<nav class="site-nav"> 
  <!-- ... -->
  <div class="trigger">
    {%- for path in page_paths -%}
      {%- assign my_page = site.pages | where: "path", path | first -%}
      {%- unless my_page.exclude -%}    
        <!-- ...  - adding all the other anchors before the search button -->
      {%- endunless -%}
    {%- endfor -%}
    <a class="page-link page-link-search" href="/search/">
      <nav>
          <!-- SEARCH SVG HERE -->
      </nav>
    </a>
  </div>
</nav> 
<!-- ... -->

I added some CSS for the icon to be on the same line as the rest of the links, to adjust its position vertically, and also to prevent the underline happening on the icon.

<style>
  .page-link nav{
    width: 1.3rem; 
    display: inline-block;  
  }
  .page-link nav svg {
    position: relative;
    top: 0.3rem;
  }
  .page-link-search:hover {
    text-decoration: none;
  }
</style>

The search is a script that runs on the client side using a JSON file.