更改 element-ui Select 中的图标

Question

我们项目中的图标字体与 element-ui 不同。可以将默认箭头图标更改为自定义吗？我在文档中找不到任何有关它的信息。我将不胜感激任何建议。

我创建了这样的组件：

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

Answer 1

没有选项可以通过使用 el-select 组件上可用的某些属性来覆盖图标。但您可以使用 css 覆盖图标

.el-select .el-input .el-select__caret::before {
  content: '\e78e' // calendar icon of element-ui
}

Answer 2

您需要更改 CSS 上的图标内容。

.el-icon-arrow-up:before { content: "\e600"; }
.el-icon-arrow-down:before { content: "\e603"; }

对于：

.el-icon-arrow-up:before { content: url(custom.svg); }
.el-icon-arrow-down:before { content: url(custom.svg); }

问候