sass - Place icon inside search field as a button in Angular

Question

I am trying to place the "search_icon" magnifying glass inside of the search field and code it as a button. This is what I have:

This is what I am going for, but I need to make the icon clickable, and this is if it is written inside of the scss file.

Here is my HTML:

      <input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
      #filterTextInput
      id="filter-text-input"
      class="search-box"
      type="text"
      [value]="itemFilterText$ | async"
      autocomplete="off"
      placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
      attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
      (keyup.enter)="searchForValue(searchString.value)" />
      <mat-icon svgIcon="search_icon"></mat-icon>

Any suggestions?

Answer 1

you can do that with some custom CSS styles for the click event, you can simply use the (click) event: HTML

<input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
      #filterTextInput
      id="filter-text-input"
      class="search-box"
      type="text"
      [value]="itemFilterText$ | async"
      autocomplete="off"
      placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
      attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
      (keyup.enter)="searchForValue(searchString.value)" />
      <mat-icon (click)="doSomething()" svgIcon="search_icon" class="search-icon"></mat-icon>

CSS

.search-icon {
  position: relative;
  right: 32px;
  top:8px;
  width: 24px;
  height:24px;
  font-size: 24px;
  cursor: pointer;
}

Inside your componenet

doSomething() {
    console.log("I am doing something!");
  }

See this working demo

But that's the ugly way of doing it, since you are already using angular material, it is better to stick to the material design guidelines. In your case you are using forms so it would be better to use something like this to align your inputs/icons

<mat-form-field>
  <mat-icon matPrefix (click)="doSomething()">search</mat-icon>
  <input matInput type="search" 
   *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
   #filterTextInput
   id="filter-text-input"
   class="search-input"
   [value]="itemFilterText$ | async"
   autocomplete="off"
   placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
   attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
   (keyup.enter)="searchForValue(searchString.value)"
  >
</mat-form-field>