如何更改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 .fa-search {
  right: 0px;
}

Answer 2

交换left为right

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

Answer 3

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

位置：中心值是无效的属性值。为了实现位置图标右侧请在下方属性更改为

position: relative;