How to customize the spin button arrow in React NumericTextBox

Replace the default increment and decrement icons with custom icons to match your application’s design. The spin button icons are controlled by the e-spin-up and e-spin-down CSS classes, which you can override with custom styling.

Customizing the spin button icons

Override the default icons of the e-spin-up and e-spin-down classes using the following CSS code snippets. Replace the content values with your desired Unicode icon codes:

  .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);
  }

index.jsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));