Making a background-image trigger a form submit is not pretty.

A better approach is to place a regular submit button outside the input, then style things to make it look like the button is inside. That will also preserve accessibility (e.g. blind users will be able to use your website), and pressing Enter will submit your form automatically across all browsers.

See the below code, or check out this jsFiddle for a working proof-of-concept.

<style type="text/css">
.search_field {
    display: inline-block;
    border: 1px inset #ccc;
}

.search_field input {
    border: none;
    padding: 0;
}

.search_field button {
    border: none;
    background: none;
}
</style>

<div class="search_field">
    <input name="q" />
    <button type="submit"><img src="magnifying_glass.png" alt="Search" /></button>
</div>

This can be simply done by setting Iconified to false on OnClick of SearchView.

searchBar.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        searchBar.setIconified(false);
    }
});

Reference: Eric Lui's answer

Hopefully it will help.

UPDATE:

You can also use it directly in your XML

app:iconifiedByDefault="false"

The issue is that the input element is over the icon, inspecting the element with the console you could see that the input element has some padding, so clicking there you're clicking on the input element.

No matter which component you use, a lightning-icon, a lightning-button-icon or a standard button, it would be the same.

You just have to move those elements:

<label class="slds-form-element__label" for="combobox-id-3">{lookupLabel}</label>
<div class="slds-is-relative">
    <div data-key="searchdiv" class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">  
        <input type="text" onfocusout={onLeave} value={searchKey} onkeyup={handleKeyChange} onchange={handleKeyChange} class="slds-input slds-combobox__input slds-has-focus" id="combobox-id-3" aria-autocomplete="list" aria-controls="listbox-id-2" role="textbox" placeholder="Search..." />   
    </div>
    <span style="right: 0.5rem; top: 0.5rem; cursor: pointer;" class="slds-is-absolute slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">  
        <lightning-icon icon-name="utility:add" size="xx-small" class="slds-icon-text-default" onclick={handleAdd} aria-hidden="true"></lightning-icon>
    </span> 
</div>

Here I created a new container with a relative positioning (slds-is-relative) which includes the searchdiv and the span with the icon. Then I setted an absolute positioning (slds-is-absolute) to the span element and provided some css. Finally an handler for onclick event has been attached to the lightning-icon.

An element with position absolute is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest containing block, the first ancestor that has a position value other than static, and its final position is determined by the values of top, right, bottom, and left.
Keep in mind that if an element's position is not explicitly defined, then it's static by default. That's why I had to create a container with a relative positioning (using slds-is-relative) and I explicitly setted top and right values of the span element.
By the way, z-index, top, right, bottom, and left have no effect on a static element.

MDN - Positioning reference.

You need to use Input Adornments.

For example:

// imports
import IconButton from "@material-ui/core/IconButton";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";

// render

<TextField
  label="With normal TextField"
  InputProps={{
    endAdornment: (
      <InputAdornment>
        <IconButton>
          <SearchIcon />
        </IconButton>
      </InputAdornment>
    )
  }}
/>

Here is a demo:

const {
  TextField,
  InputAdornment,
  IconButton,
  SearchIcon,
  Icon
} = window['material-ui'];

class App extends React.Component {
  render() {
    return (
      <TextField
        label="With normal TextField"
        InputProps={{
          endAdornment: (
            <InputAdornment>
              <IconButton>
                <Icon>search</Icon>
              </IconButton>
            </InputAdornment>
          )
        }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="root"></div>

Remove the list, it's not needed

<html>
<head>
<script src="https://kit.fontawesome.com/2442adcce2.js" crossorigin="anonymous"></script> 
 </head>
 <body>
 <a href ="https://www.w3schools.com">
            <i class="fas fa-shopping-cart p-2"></i>
 </a> 
</body>
</html>

This works perfectly, feel free to reply if it doesn't work. I've tested it to make sure.

You may use icons from Glyphicons or Font-Awesome, which are useful for icon design usage.

Here's an example, using glyphicon's search icon

<button class="icon"><i class="glyphicon glyphicon-search"></i></button>

Or using Font Awesome's search icon

<button class="icon"><i class="fa fa-search"></i></button>

Overview

You created this UI element to allow users to easily clear their search input criteria. In most cases users who use their keyboard to interact with the form will be choosing the search button over the clear button as this is the primary action. By using keyboard navigation your first concern would be your indexing order, should clear come before search or not at all?

Tabable?

In my opinion good design is inclusive, some users may be using assistive technology. Removing clear from the index removes this feature from these users. That being said, yes you should make the clear button indexable.

Clear before search or search before clear?

It has become commonplace that to complete the primary action in a form you press Enter. In most cases users will expect that the tabbing order does not change from common designs (top to bottom, left to right). The user should tab into the input field, tab to access clear, and finally tab to access search. At any time you can press enter to submit the search as long as your focus is in the form (input field).

Things to consider

• Information Architecture

Since "clear" is specific to this input field and not the form (even though the form only has one input field), it makes sense to put the clear button inside the input field (very common UI architecture Parent->child). However, the "Search" icon is your form's primary action. It makes more sense to put this outside of your input field. This will keep all forms following the same information architecture.

• Textual Call to action

If there see search results, does "clear" also remove the results or just the input in the form? The "Close", "Delete", "Stop" icon is holistic and is not representative of exactly what the action is you're trying to inform the users of. Consider removing this icon and just use text to tell users what this does. Perhaps use a tool tip, but don't forget to use alt="" attribute for those on screen readers.

The same consideration could apply to the search call to action. Right now you're using a label to inform us of the input fields action not what the input field is. However, you can achieve this by using "Search" as the action and not the label. This again will keep all forms following the same patterns and removes any ambiguity.

Since search is at the top of your site, users read top to bottom, left to right. At the time of seeing this input field, they may have little context of what it does. Does this search products, contact info, blogs, search engines? Try to let your call to actions be clear and concise, for example "search products". If there is not a lot of room, you can use placeholder text to convey this to the users.

Never make the user think. "Don't make me think"