Change Search Widget with an icon

Hi there,

tricky to add icons to a Search input field.
You could create your own search form and use a HTML widget, this will get you started, i added the GP icon SVG to the button:

<form method="get" class="custom-search-form" action="site-url">
    <label>
        <span class="screen-reader-text">Search for:</span>

        <input type="search" class="search-field" value="" name="s" title="Search for:" placeholder="search">
        <span class="border"></span>
    </label>
    <button type="submit" class="search-submit">
        <svg viewbox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
        </svg>
    </button>
</form>

Hi David it says there is an error on the html widgets

Ok the viewBox should be lowercase viewbox! and it works !

David i had previously this code for displaying flex on header and now that i have changed the widget with the custom one should i change the class ? wpml widget was left logo center and search form right

@media (min-width: 769px) {
.inside-header {
display: flex;
min-height: 120px;
}
.header-widget {
max-width: 100%;
width: 100%;
display: flex;
align-items: center;;
}
.header-widget .widget.widget_search {
order: 5;
margin-left: auto;
}
.site-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
}

This part of your CSS:

.header-widget .widget.widget_search {
    order: 5;
    margin-left: auto;
}

Change to:

.header-widget .widget.widget_text {
    order: 5;
    margin-left: auto;
}