Заменить значок по умолчанию из материала mat-stepper angular

Я думаю, что в первую очередь вам следует искать ответ, это документация и примеры Angular Material.

Переопределение значков описывается просто

https://material.angular.io/components/stepper/overview#overriding-icons

Из документов:

By default, the step headers will use the create and done icons from the Material design icon set via elements. If you want to provide a different set of icons, you can do so by placing a matStepperIcon for each of the icons that you want to override. The index, active, and optional values of the individual steps are available through template variables:

<mat-vertical-stepper>
  <ng-template matStepperIcon = "edit">
    <mat-icon>insert_drive_file</mat-icon>
  </ng-template>

  <ng-template matStepperIcon = "done">
    <mat-icon>done_all</mat-icon>
  </ng-template>

  <!-- Custom icon with a context variable. -->
  <ng-template matStepperIcon = "number" let-index = "index">
    {{index + 10}}
  </ng-template>

  <!-- Stepper steps go here -->
</mat-vertical-stepper>

Я создал пример изменения значка редактирования по умолчанию: Stackblitz.

Переместите свое определение измененного значка редактирования вне<mat-step>...</mat-step, и оно должно работать (проверено с последней версией Angular 7.0.2):

<mat-horizontal-stepper [linear] = "isLinear">

  <!-- change default 'edit' icon -->
  <ng-template matStepperIcon = "edit">
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>

  <mat-step label = "Antes de começar...">
    <div>
        <button mat-button matStepperNext>Continuar</button>
    </div>
  </mat-step>

Кроме того, я добавил несколько примеров для изменения значков различных шагов (проверьте комментарии в Stackblitz). Чтобы это работало, вам нужно добавить поставщика в свой компонент:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MAT_STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';

@Component({
  selector: 'with-material-app',
  templateUrl: './withmaterial.component.html',
  styleUrls: ['./withmaterial.component.css'],
  providers: [{
    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
  }]
})
export class WithMaterialComponent implements OnInit {
  ...
}

и измените свой mat-horizontal-stepper следующим образом:

<mat-horizontal-stepper [linear] = "isLinear">

    <!-- change default 'edit' icon -->
    <ng-template matStepperIcon = "edit">
        <mat-icon>bubble_chart</mat-icon>
    </ng-template>

    <!-- changed step icons -->
    <ng-template matStepperIcon = "home">
        <mat-icon>home</mat-icon>
    </ng-template>

    <mat-step label = "Antes de começar..." state = "home">
        <div>
            <button mat-button matStepperNext>Continuar</button>
        </div>
    </mat-step>

  ...

</mat-horizontal-stepper>

ng-template с matStepperIcon='xyz' заменяет значок mat-step на state = "xyz".

Этот пример работает для меня:

<mat-horizontal-stepper labelPosition = "bottom" #stepper color = "primary" linear >        
    <!-- Define the edit icon, by default is 'create' -->
    <ng-template matStepperIcon = "edit">
        <mat-icon>done</mat-icon>
    </ng-template>

    <!-- Define the number of the step -->                  
    <ng-template matStepperIcon = "number" let-index = "index">
    {{index+1}}
    </ng-template>

    <!-- Make your steps -->
    <mat-step label = "Step 1">
        Stepper 1
    </mat-step>
    <mat-step label = "Step 2">
        Stepper 2
    </mat-step>
</mat-horizontal-stepper>

Чтобы расширить принятый ответ: я хотел сохранить номер шага, а не заменять значок. Это возможно с помощью следующего:

<mat-horizontal-stepper linear #stepper >
  <ng-template matStepperIcon = "edit" let-index = "index">{{index + 1}}</ng-template>
  <ng-template matStepperIcon = "done" let-index = "index">{{index + 1}}</ng-template>
  <mat-step>
    <!-- add steps as usual -->
  </mat-step
</mat-horizontal-stepper>

В моем случае я хотел переопределить значки для каждого шага независимо от состояния, в котором находится шаг, т.е. чтобы на данном шаге всегда отображался один и тот же значок, даже если он редактируется или уже завершен. Я сделал это следующим образом.

В шаблоне:

<mat-stepper>
  <ng-template #stepperIcon>
    <mat-icon>home</mat-icon>
  </ng-template>
  <mat-step label = "Step 1">
    ...
  </mat-step>

  <ng-template #stepperIcon>
    <mat-icon>bubble_chart</mat-icon>
  </ng-template>
  <mat-step label = "Step 2">
    ...
  </mat-step>
  
  <ng-template matStepperIcon = "number" let-index = "index">
    <ng-container [ngTemplateOutlet] = "matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
  <ng-template matStepperIcon = "edit" let-index = "index">
    <ng-container [ngTemplateOutlet] = "matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
  <ng-template matStepperIcon = "done" let-index = "index">
    <ng-container [ngTemplateOutlet] = "matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
  <ng-template matStepperIcon = "error" let-index = "index">
    <ng-container [ngTemplateOutlet] = "matStepperIcons && matStepperIcons[index]"></ng-container>
  </ng-template>
</mat-stepper>

В компоненте:

export class Component implements AfterViewInit {

  @ViewChildren('stepperIcon') private matStepperIconViewChildren;

  matStepperIcons: any[];

  ngAfterViewInit(): void {
    this.matStepperIcons = this.matStepperIconViewChildren.toArray();
  }
}

Это, конечно, зависит от того, что шаблоны значков определены в том же порядке, что и шаги, к которым они относятся, и имеют с ними однозначные отношения.