Как изменить положение иконки внутри поля со списком в html?

Question

У меня есть окно поиска на странице, и в этом поле есть значок, в котором я нашел пример кода для значка.

Но я хочу поместить этот значок справа от поля со списком.Я играл в стиле , но мне не удалось добиться положения значка справа.

Можете ли вы мне помочь?

Мой код:

<mat-form-field class="search">
          <div class="icon-div">
            <span class="fa fa-search"></span>
          </div>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search office">
</mat-form-field>

и мой файл стиля:

.search {
  position: center;
  text-align: center;
}

.search input {
  text-indent: 4px;
}

.search .fa-search {
  position: absolute;
  top: 4px;
  left: 0px;
  font-size: 20px;
  text-align: right;
}

.icon-div {
  padding-top: 4px;
}

Answer 1

.search {
  position: center;
  text-align: center;
}

Значения центра позиции - недопустимое значение свойства.Чтобы получить значок положения справа, измените это свойство ниже на

position: relative;

Answer 2

.search .fa-search {
  right: 0px;
}

Answer 3

Своп left для right

.search .fa-search {
  position: absolute;
  top: 4px;
  right: 0px;
  font-size: 20px;
  text-align: right;
}