Ok so i wasn't able to add an icon like i wanted, but i was able to add a search bar to the header on the Narrative theme, which will do for now. I'll explain how i did it in case anyone else wants to add a search bar to the header on the Narrative theme as well.
1. Find the header.liquid file under the sections folder.
2. Then paste {% include 'search-bar' %} under the </header> tag.
<div class="site-header__section site-header__section--button">
<a href="{{ routes.cart_url }}" class="btn btn--clear btn--square btn--hover-scale site-header__cart ajax-cart__toggle" aria-expanded="false">
{%- assign icon = 'icon-header-' | append: section.settings.icon %}
{% include icon %}
<span class="icon__fallback-text">{{ 'general.header.view_cart' | t }}</span>
<span class="site-header__cart-bubble{% if cart.item_count > 0 %} site-header__cart-bubble--visible{% endif %}"></span>
</a>
</div>
</div>
{% include 'search-bar' %}
</header>
</div>
3. Voila
From there you'll have to fix a little with the padding and margins to fit your theme. I've done this:
.navigation__search {
position: relative;
max-width: 960px;
margin: 0 auto;
//margin-bottom: 20px;
border-radius: 10px;
padding: 10px 20px 20px 20px;
}
.input-group--underline {
border: 1px solid #000;
}
.input-group--underline {
position: relative;
display: flex;
width: 100%;
border-collapse: separate;
}
Cheers
