How to replace next button with mat-chip in Angular Material stepper?

Question

I am using angular material stepper, in the stepper i want to replace next button with mat-chip and act as same functionality as next button. Here is angular stepper stackblitz example

This is what i want:

Answer 1

I you just want the button to look like a material chip (rather than actually be a material chip), you could remove 'mat-button' from the next button and add your own class, e.g. 'next_btn':

<button class="next_btn" matStepperNext>Next</button>

You can then just style the button so it looks like a chip:

button.next_btn {
    padding: 7px 12px;
    border-radius: 16px;
    min-height: 32px;
    background-color: #e0e0e0;
    color: rgba(0,0,0,.87);
    box-shadow:none;
    border:none;
    cursor: pointer;
    outline:none;
}

button.next_btn:focus 
{
    outline:none;
}

Example here.

Answer 2

How about inserting the button inside the chip? and managing the look... take a look here for demo

HTML:

<mat-chip-list>
  <mat-chip><button mat-button matStepperPrevious>Back</button></mat-chip>
  <mat-chip><button mat-button matStepperNext>Next</button></mat-chip>
</mat-chip-list>

CSS:

mat-chip{padding:0;}