Angular material stepper remove numbers

Question

How can I remove the numbers from the Angular material stepper?

I do not wish to replace them with an icon, I wish to have an empty circle.

Edit : I am using angular 9

Camelopardus

Answer 1

Inside the mat-step, insert these templates, thus replacing the number that is the default.

<mat-horizontal-stepper [linear]="true" #stepper>
  <!-- STEPS -->
  <mat-step label="First Step" state="your-state-name-here-1">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Second Step" state="your-state-name-here-2">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Third Step" state="your-state-name-here-3">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <!-- STEPS -->

  <!-- Replace icon mat-step -->
  <ng-template matStepperIcon="your-state-name-here-1">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-2">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-3">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <!-- Replace icon mat-step -->
</mat-horizontal-stepper>

Obs: In order to use the custom step states, you must add the displayDefaultIndicatorType option to the global default stepper options which can be specified by providing a value for STEPPER_GLOBAL_OPTIONS in your application's root module or specific child module.

@NgModule({
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }
  ]
})

Official documentation

Penicillium

I could not get this solution to work. Blindly coying your code did not change anything ( numbers still displayed ) and I am very uncertain of what to do with your last line of code – Camelopardus

@MatthieuRaynauddeFitte, sorry, i forgot to mention this provider that you need to put in the module, i updated the answer, can you check if it works right? – Penicillium

sorry about the long delay. No it does not work and I do not understand why. It is possible that I have an interaction I am not understanding or seeing – Camelopardus

to be more precise : I does work but only if I have selected the element. If unselected, it displays a white "done" text rather than nothing – Camelopardus

ok found the complete solution with lots of documentation reading, fiddling and your answer, you where very close to the answer. For whatever reason, material absolutely wants to display an icon or a number but you can overload it with <ng-template matStepperIcon="your-state-name-here"><mat-icon>icon-name-here</mat-icon><ng-template>. The additional problem I had is that I did not have any icon imports so the "done" text I was complaining about was in fact the name of the icon it was trying to display. – Camelopardus

you can see an example here : stackblitz.com/angular/… could you edit your answer so that I can accept it ? – Camelopardus

@MatthieuRaynauddeFitte, Thanks for your feedback, I thought you didn't want any icons that just wanted to remove the step numbers from the mat, the way I went through the example simulating that stackblitz link you passed me is an empty circle link. I will update my answer. You can update your question and inform that you want to replace the number with an icon, I think the question was not very clear. – Penicillium

My bad, forgot to remove them. It works well if the <mat-icon> is empty, I only get an empty circle. The reason they are there is to do an overload of the default ones ( that get displayed when no icons are given ). This way it works. So icon-name-here should be empty. Sorry about that ^^' – Camelopardus

@MatthieuRaynauddeFitte, example-img, As you can see in this image, I used the example you gave me from StackBlitz, leaving yourself without the mat-inside icon already has the same effect. Thank you for sharing your experience with me, I made one more adjustment to the question, could you mark it as an answer? – Penicillium

thank you for the answer and sorry for the confusions ^^ – Camelopardus

not sure about the version of angular here, seems not to be old but it is not working any more (if ever did) – Woermer

Is there a way to override the edit/done/number states this way? – Sensorium

Answer 2

Do not display number

::ng-deep .mat-step-icon-content { display: none !important; }

Do not display the circle and number

::ng-deep .mat-horizontal-stepper-header .mat-step-icon {
display: none !important;}

Antistrophe