Material-ui: How to change the numbers in steps of material ui stepper

[akhilaudable]

I asked the question: https://stackoverflow.com/q/51492162/5946125

Steps takes the numbers which are length of the steps state array ex:

   state = {
       steps: [0, 1, 2, 3]
    };

Later this state may change to :

    this.setState({
      steps: [1,2,3,4]
    });

Or

  this.setState({
     steps: [2,3,4,5]
   }); 

and so on....
This is the code for stepper.

 <Stepper alternativeLabel nonLinear activeStep={activePage}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
               <StepLabel 
                  onClick={this.handleStep(step)}
                  disabled={dealsLoading}
               >
                {step}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>

But in all the cases my steps show only 1,2,3,4,. I need to change those numbers according to the steps' state array.

If I change initial state of steps to [1,2,5,6] (some random) also, step buttons are still 1,2,3,4. Why don't they change? Or how to change?

If I use StepLabel component it looks like and code for this:

 <Stepper alternativeLabel nonLinear activeStep={activePage}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
               <StepLabel 
                  onClick={this.handleStep(step)}
                  disabled={dealsLoading}
               >
                {step}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>

But I don't want label. I want those labels should be on step buttons.

[mbrookes]

Use the icon attribute of StepLabel.

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[JustinStoddard]

@mbrookes Can we get an example of how that would look?

Could I just do this in the icon attr? icon={<span>3</span>}

or does it need to be more specific?

[JustinStoddard]

@akhilaudable What does this look like for you?

[mbrookes]

@JustinStoddard

For example icon={3} or icon="A"

Line 63 in demo.tsx:

https://codesandbox.io/s/material-demo-6mdwm

[JustinStoddard]

@mbrookes Thank You! I ended up figuring it out :v: