Icons in Perch Input Buttons

I would like to add a magnifying glass icon to my Perch search form submit button does anyone know how?

<perch:form id="search" method="get" action="/../search/" class="mx-2 my-auto d-inline">
<div class="input-group">

<perch:input type="search" id="q" class="form-control border border-right-0" placeholder="Search..."  />

     <span class="input-group-append">

               <perch:input type="submit" value="Search" class="btn btn-outline-light border border-left-0" />

     </span>
</div>
</perch:form>

I am using Bootstrap 4 and the form works apart from I would rather have the magnifying glass icon from Font Awesome

<i class="fal fa-search"></i>

Instead of the word "Search" on the submit button. I would like to crack this as I think it would also apply to other submit buttons used in Perch.