首先，需要在mat-horizontal-stepper或mat-vertical-stepper中使用matStepIcon指令定义图标模板。然后，可以使用mat-step-icon-state-number指令设置数字颜色。要根据条件更改颜色，可以在模板中使用ngClass指令，并设置一个对象来定义不同条件下的类名。例如：

{{index + 1}}

在上面的示例中，ngClass指令定义了三个可能的类名：active，complete和disabled。这些类名根据当前步骤的索引和所选索引之间的关系确定。在mat-icon指令中，ngClass指令定义了两个可能的类名：green和red。这些类名根据当前步骤的索引确定。

为了使上面的示例工作，需要定义相应的CSS样式。例如：

mat-horizontal-stepper .mat-step-icon.active { background-color: #3f51b5; color: white; }

mat-horizontal-stepper .mat-step-icon.complete { background-color: #4caf50; color: white; }

mat-horizontal-stepper .mat-step-icon.disabled { background-color: #e0e0e0; color: rgba(0, 0, 0, 0.38); }

.mat-icon.green { color: green; }

.mat-icon.red { color: red; }

这些样式指定了三个类（active，complete和disabled）及其颜色（蓝色、绿色和灰色）。它们还定义了两个类名（绿色和红色），这些类名会影响mat-icon指令的颜色。