I've created a sub-theme of the Drupal 8 Bootstrap base theme. My problem is that I'm using a customized version of the Bootstrap CSS Framework that does not include Glyphicons. Instead of Glyphicons, my project is using fontAwesome icons. What I've realized though, is that the Bootstrap theme uses a Glyphicon Search Icon for the Search Form. Since I'm not using glyphicons and the CSS files are not included, I get a search form button that looks like this.
It should appear like this.
If i inspect the HTML markup using my browser, my theory is correct.
<button type="submit" value="Search" class="button js-form-submit form-submit btn-primary btn icon-only" name=""><span class="sr-only">Search</span><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></button>
if I change the following markup, the button shows up correctly because it can find the icon.
<span class="icon glyphicon glypicon-search"></span> to <span class="fa fa-search"></span>
What I want to do is to be able to change the icon or the code in the base theme that generates this snippet of code.
<span class="icon glyphicon glypicon-search"></span>
My assumption is that I should use a preprocess function to alter the form block and output/replace the Glyphicon span with the Fontawesome span.
I believe that the input--button.html.twig in the bootstrap base theme is responsible for outputting the icon classes because of this code.
{% block input %}
{% if icon_only %}
<button{{ attributes.addClass(classes, 'icon-only') }}>
<span class="sr-only">{{ label }}</span>
{{ icon }}
</button>
{% else %}
{% if icon_position == 'after' %}
<button{{ attributes.addClass(classes) }}>{{ label }}{{ icon }}</button>{{ children }}
{% else %}
<button{{ attributes.addClass(classes) }}>{{ icon }}{{ label }}</button>{{ children }}
{% endif %}
{% endif %}
{{ children }}
{% endblock %}
Apparently, it is used to alter the button of many elements instead of only the search form.