How can i reduce/minimize the distance between Steps in Angular Material Horizontal stepper?

Question

I am working with the Angular Material 8 Horizontal stepper .

Now I want to style the stepper but my problem is I don't know how to change the distance between the steps.

I tryed with CSS:

::ng-deep .mat-horizontal-stepper-header-container {
  max-width: 5px;
  width: 5px;
}

But I can't make the distance between step icons very small... Any idea?

Answer 1

I just ran into the same problem and solved it by adding the following css:

::ng-deep.mat-step-header {
  padding: 5px;
}

I used a vertical stepper and found out that the stepper headers are surroundend by 24px padding in both directions by default. Adding the above css changes the padding.

Update: Just realized that you asked explicitly for horizontal steppers, and there the problem isn't only the padding but also the line length. The line length can be controled by following css:

::ng-deep.mat-stepper-horizontal-line {
  min-width: 5px !important;
}