SF-3171 Add icons to draft generation steps buttons (#2989)

Added icons to draft generation steps

Author: josephmyers

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-generation-steps/draft-generation-steps.component.html

@@ -11,9 +11,13 @@
           <app-notice type="error" mode="fill-dark">{{ t("confirm_codes_correct_to_continue") }}</app-notice>
         }
         <div class="button-strip">
-          <button mat-stroked-button class="backout-button" (click)="cancel.emit()">{{ t("back") }}</button>
+          <button mat-stroked-button class="backout-button" (click)="cancel.emit()">
+            <mat-icon>chevron_{{ i18n.backwardDirectionWord }}</mat-icon>
+            {{ t("back") }}
+          </button>
           <button mat-flat-button (click)="tryAdvanceStep(); nextClickedOnLanguageVerification = true" color="primary">
             {{ t("next") }}
+            <mat-icon iconPositionEnd>chevron_{{ i18n.forwardDirectionWord }}</mat-icon>
           </button>
         </div>
       </mat-step>
@@ -69,9 +73,13 @@ <h4 class="explanation">
           </app-notice>
         }
         <div class="button-strip">
-          <button mat-stroked-button matStepperPrevious>{{ t("back") }}</button>
+          <button mat-stroked-button matStepperPrevious>
+            <mat-icon>chevron_{{ i18n.backwardDirectionWord }}</mat-icon>
+            {{ t("back") }}
+          </button>
           <button mat-flat-button (click)="tryAdvanceStep()" color="primary">
             {{ t("next") }}
+            <mat-icon iconPositionEnd>chevron_{{ i18n.forwardDirectionWord }}</mat-icon>
           </button>
         </div>
       </mat-step>
@@ -150,7 +158,10 @@ <h2>{{ t("reference_books") }}</h2>
           </app-notice>
         }
         <div class="button-strip">
-          <button mat-stroked-button matStepperPrevious>{{ t("back") }}</button>
+          <button mat-stroked-button matStepperPrevious>
+            <mat-icon>chevron_{{ i18n.backwardDirectionWord }}</mat-icon>
+            {{ t("back") }}
+          </button>
           <button
             mat-flat-button
             (click)="tryAdvanceStep()"
@@ -159,6 +170,7 @@ <h2>{{ t("reference_books") }}</h2>
             [disabled]="isStepsCompleted"
           >
             {{ t("next") }}
+            <mat-icon iconPositionEnd>chevron_{{ i18n.forwardDirectionWord }}</mat-icon>
           </button>
         </div>
       </mat-step>
@@ -175,7 +187,10 @@ <h1 class="mat-headline-4">{{ t("choose_additional_training_data_files_title") }
             data-test-id="draft-stepper-training-data-files"
           ></app-training-data-multi-select>
           <div class="button-strip">
-            <button mat-stroked-button matStepperPrevious>{{ t("back") }}</button>
+            <button mat-stroked-button matStepperPrevious>
+              <mat-icon>chevron_{{ i18n.backwardDirectionWord }}</mat-icon>
+              {{ t("back") }}
+            </button>
             <button
               mat-flat-button
               (click)="tryAdvanceStep()"
@@ -184,6 +199,7 @@ <h1 class="mat-headline-4">{{ t("choose_additional_training_data_files_title") }
               [disabled]="isStepsCompleted"
             >
               {{ t("next") }}
+              <mat-icon iconPositionEnd>chevron_{{ i18n.forwardDirectionWord }}</mat-icon>
             </button>
           </div>
         </mat-step>
@@ -201,7 +217,10 @@ <h1 class="mat-headline-4">{{ t("configure_advanced_settings_title") }}</h1>
             <app-notice icon="warning" type="warning" class="warning">{{ t("fast_training_warning") }}</app-notice>
           }
           <div class="button-strip">
-            <button mat-stroked-button matStepperPrevious>{{ t("back") }}</button>
+            <button mat-stroked-button matStepperPrevious>
+              <mat-icon>chevron_{{ i18n.backwardDirectionWord }}</mat-icon>
+              {{ t("back") }}
+            </button>
             <button
               mat-flat-button
               (click)="tryAdvanceStep()"
@@ -210,6 +229,7 @@ <h1 class="mat-headline-4">{{ t("configure_advanced_settings_title") }}</h1>
               [disabled]="isStepsCompleted"
             >
               {{ t("next") }}
+              <mat-icon iconPositionEnd>chevron_{{ i18n.forwardDirectionWord }}</mat-icon>
             </button>
           </div>
         </mat-step>
@@ -267,8 +287,12 @@ <h2>
         </mat-card>
 
         <div class="button-strip">
-          <button mat-stroked-button matStepperPrevious>{{ t("back") }}</button>
+          <button mat-stroked-button matStepperPrevious>
+            <mat-icon>chevron_{{ i18n.backwardDirectionWord }}</mat-icon>
+            {{ t("back") }}
+          </button>
           <button mat-flat-button (click)="tryAdvanceStep()" color="primary">
+            <mat-icon class="mirror-rtl">auto_awesome</mat-icon>
             {{ t("generate_draft") }}
           </button>
           @if (isStepsCompleted) {