Angular/Material mat-form-field input - Floating label issues

<form class="search-form">
  <mat-form-field class="example-full-width" appearance="standard">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
  <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

Please set the appearance of mat-form-field to standard and the placeholder will stop behaving like label.

Explanation : By default the mat-label in mat-form-field floats and the appearance of mat-form-field is "legacy". That means if a mat-label is not present with the form field then placeholder will start behaving like the label and it floats upwards. So to stop this you should manually update the appearance to "standard", so it stops behaving like label and stays as a placeholder.

Praveen Soni's answer above doesn't work for non-legacy versions, as per this:

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.

That means you should simply use placeholder instead of the label.

1.Use floatLabel="never" in mat-form-field

<mat-form-field floatLabel="never">
</mat-form-field>

just add floatLabel="never" in mat-form-field i.e.

<mat-form-field floatLabel="never">
   <input type="text" matInput placeholder="Other">
</mat-form-field>

As you can see the image below, cursor is inside input field but label didn't float.

<div class="custom_autosuggestion">
   <mat-form-field class="example-full-width" floatLabel="never">
      <input class="custom_color_title"
      aria-label="Number" matInput [formControl]="myColorControl" type="text" name=""                                                  [matAutocomplete]="auto">
      <mat-placeholder class="custom_placeholder">{{templateParse.Search_Colors_by_Name_or_Code}}</mat-placeholder>
      <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredColorOptions | async" [value]="option">
                                                        <!-- {{option}} -->
      </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</div>

According to the official doc on floating labels, the placeholder gets promoted as the label too for mat-form-field that isn't of the appearance "outline". To prevent this, you should specify an empty label like so:

  <mat-form-field class="example-full-width">
     <mat-label></mat-label> // THE EMPTY LABEL
     <input class="toolbar-search" type="text" matInput>
     <mat-placeholder>Search</mat-placeholder>
     <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>