Vue2 ElementUI el-select自定义图标 右边的icon图标

在 Vue 2 中使用 Element UI（el-select 组件）时，如果你想要更改下拉选择框（el-select）的图标，此处是通过，使用 CSS 覆盖来实现的 官网的el-select图标如下图所示

需要更改成的图标为

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 380px;
  height: 40px;

  ::v-deep {
    input {
      background: #f8f9fa;
      border-color: #f5f5f5;
      border-radius: 12px;
      //box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

      &:hover,
      &:focus {
        border-color: rgba(0, 0, 0, 0.1);
      }
    }

    .el-input.is-focus input {
      border-color: #ccc;
    }
  }
}

/**修改边框和字体颜色 */
::v-deep .el-select .el-input .el-input__inner {
  border-radius: 100px;
  border: 1px rgba(0, 0, 0, 0.10);
  color: rgba(0, 0, 0, 0.50);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.5;
  background: #F7F7F7;
}

/**修改下拉图标颜色 */
::v-deep {
  .el-input {
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
      right: 12px;

      .el-input__suffix-inner {
        display: inline-block;
        width: 12px;
        height: 12px;
      }
    }

    input.el-input__inner::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: rgba(0, 0, 0, 0.50);
    }

    input.el-input__inner::-moz-placeholder { /* Firefox 19+ */
      color: rgba(0, 0, 0, 0.50);
    }

    input.el-input__inner:-ms-input-placeholder { /* IE 10+ */
      color: rgba(0, 0, 0, 0.50);
    }
  }
}

::v-deep.el-select .el-input .el-icon-arrow-up:before {
  content: ""; /* 使用 Unicode 字符表示向下的实心三角箭头 */
  background: url("../../assets/home_images/down_arrow.png") center center no-repeat;
}

::v-deep.el-select .el-input .el-icon-arrow-up {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/home_images/down_arrow.png');
  background-repeat: no-repeat;
  background-size: contain;
}

::v-deep.el-select .el-input .el-icon-circle-close:before {
  content: ""; /* 使用 Unicode 字符表示向下的实心三角箭头 */
}

::v-deep.el-select .el-input .el-icon-circle-close {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('../../assets/close_select.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.h5-page {
  .el-select {
    width: 300px;
    height: 40px;

    ::v-deep {
      input {
        border-radius: 0;
        background: transparent;
        border-color: #E5E7EF;
        box-shadow: none;
        color: #121314;

        &:hover,
        &:focus {
          border-color: #121314;
        }
      }

      .el-input.is-focus input {
        border-color: #121314;
      }
    }
  }
}
</style>
```
```