This section explains about how to change/customize spin up and down icons. You can customize spin button icons using e-spin-up and e-spin-down
classes of those buttons.
You can override the default icons of e-spin-up and e-spin-down classes using the following CSS code snippets.
.e-numeric .e-input-group-icon.e-spin-up:before {
content: "\e823";
color: rgba(0, 0, 0, 0.54);
}
.e-numeric .e-input-group-icon.e-spin-down:before {
content: "\e934";
color: rgba(0, 0, 0, 0.54);
}<template>
<div id="app">
<div class='wrap'>
<ejs-numerictextbox id="numeric" :value="value"></ejs-numerictextbox>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(NumericTextBoxPlugin);
export default {
data () {
return {
// sets number of decimal places to be allowed by the NumericTextBox
value: 10,
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
.wrap {
margin: 0 auto;
width: 240px;
padding-top: 100px;
}
/* csslint ignore:start */
.e-numeric .e-input-group-icon.e-spin-up:before {
content: "\e823";
color: rgba(0, 0, 0, 0.54);
}
.e-numeric .e-input-group-icon.e-spin-down:before {
content: "\e934";
color: rgba(0, 0, 0, 0.54);
}
</style>