Change icon in of element-ui Select

Question

we are different icons font in project than element-ui. Is possible to change default arrow icon to custom? I can't find nothing about it in documentation. I will be grateful for any advice.

I have created component like this:

<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

There is no option to override the icon by using some property that is available on the el-select component. But it is possible that you override the icon by using css

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

Answer 2

You need change de icon content on CSS.

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

For:

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

Grettings