<div class="dot">
  <div class="inner-dot"></div>
  <nx-icon class="checkmark" name="check"></nx-icon>
</div>
<span class="sr-only" *ngIf="isComplete">Completed: </span>
<span class="sr-only" *ngIf="isCurrent">Current: </span>
<span class="label" *ngIf="label && !hideLabel">{{ label }}</span>

./navigation-step.component.scss

$dot-size: 8px;
$dot-border-size: 2px;

:host {
  display: flex;
  position: relative;
  align-items: center;
  font-size: var(--multi-stepper-step-font-size);
  min-height: 20px;
}

:host(.is-horizontal) {
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

:host:focus {
  outline: none;
}

:host(.cdk-keyboard-focused) {
  .dot {
    box-shadow: 0 0 0 2px var(--multi-stepper-dot-checkmark-color),
      0 0 0 6px var(--multi-stepper-dot-touched-color);
  }
}

.label {
  margin-left: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:host(.is-horizontal) .label {
  margin-left: 0;
  white-space: initial;
  text-align: center;
}

:host(.is-interactive) .dot,
:host(.is-interactive) .label {
  cursor: pointer;
}

.dot {
  flex-shrink: 0;
  border-radius: 50%;
  width: 2 * $dot-size;
  height: 2 * $dot-size;
  border: $dot-border-size solid var(--multi-stepper-dot-touched-color);
  position: relative;
  font-size: 16px;
}

:host(.no-dot) .dot {
  display: none;
}

:host(.is-horizontal) .dot {
  margin-bottom: $dot-size;
}

.icon {
  font-size: 16px;
}

.inner-dot {
  width: $dot-size;
  height: $dot-size;
  border-radius: 50%;
  background-color: var(--multi-stepper-dot-touched-color);
  transform: translate($dot-border-size, $dot-border-size);
  position: absolute;
  display: none;
}

.checkmark {
  position: absolute;
  transform: translate(-$dot-border-size, -$dot-border-size);
  display: none;
}

:host(.is-complete) {
  .dot {
    background-color: var(--multi-stepper-dot-touched-color);
    color: var(--multi-stepper-dot-checkmark-color);
  }

  .checkmark {
    display: block;
  }
}

:host(.is-current) {
  .dot {
    color: var(--multi-stepper-dot-checkmark-color);
  }
  .inner-dot {
    display: block;
  }
  cursor: pointer;
}

:host(.is-current:not(.is-horizontal)) {
  .label {
    font-weight: 700;
  }
}

:host(.is-unknown) {
  .dot {
    border-color: var(--multi-stepper-dot-disabled-color);
  }
  cursor: not-allowed;
}

:host(.is-pending) {
  color: var(--multi-stepper-step-disabled-color);

  .dot {
    border: $dot-border-size solid var(--multi-stepper-dot-disabled-color);
  }
  cursor: not-allowed;
}

:host(.is-unclickable) {
  .dot,
  .label {
    cursor: not-allowed;
  }
  cursor: not-allowed;
}

:host(:not(.no-dot):not(.is-horizontal)) {
  margin-bottom: 2 * $dot-size + 2 * $dot-border-size;

  &:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 3 * $dot-size - $dot-border-size;
    left: $dot-size - $dot-border-size;
    border-left: calc($dot-size / 2) dotted var(--multi-stepper-line-color);
    height: 2 * $dot-size;
  }

  &.is-complete::before {
    border-left-style: solid;
    border-left-color: var(--multi-stepper-dot-touched-color);
    height: 3 * $dot-size;
    margin: (-2 * $dot-border-size) 0;
  }
}

:host(:not(.no-dot).is-horizontal) {
  &:not(:last-child)::before {
    content: '';
    position: absolute;
    top: $dot-size - $dot-border-size;
    left: (3 * $dot-size);
    border-top: calc($dot-size / 2) dotted var(--multi-stepper-line-color);
    height: 0;
    width: calc(100% - #{3 * $dot-size});
    transform: translateX(50%);
  }

  &.is-complete::before {
    border-top-style: solid;
    border-top-color: var(--multi-stepper-dot-touched-color);
    left: (2 * $dot-size);
    width: calc(100% - #{2 * $dot-size});
  }
}

.sr-only {
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}