add custom mat-icon in mat-password-strenght-info

Author: Anthony Cohen

projects/angular-material-extensions/password-strength/src/lib/component/mat-password-strength-info/mat-password-strength-info.component.html

@@ -4,10 +4,10 @@
       <div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error" @flipY>
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>{{lowerCaseCriteriaMsg}}</span>
     </div>
@@ -16,10 +16,10 @@
       <div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>{{upperCaseCriteriaMsg}}</span>
     </div>
@@ -28,10 +28,10 @@
       <div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>{{digitsCriteriaMsg}}</span>
     </div>
@@ -40,10 +40,10 @@
       <div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>{{specialCharsCriteriaMsg}}</span>
     </div>
@@ -52,10 +52,10 @@
       <div *ngIf="passwordComponent.containAtLeastMinChars; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>{{minCharsCriteriaMsg}}</span>
     </div>
@@ -64,10 +64,10 @@
       <div *ngIf="passwordComponent.containAtCustomChars; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>{{customCharsCriteriaMsg}}</span>
     </div>
@@ -76,13 +76,13 @@
       <div *ngIf="passwordComponent.strength === 100; then done else error">
       </div>
       <ng-template #done>
-        <mat-icon @positiveState color="primary">done</mat-icon>
+        <mat-icon @positiveState color="primary">{{matIconDone}}</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn">{{matIconError}}</mat-icon>
       </ng-template>
       <span>Password's strength = {{passwordComponent.strength}} %100</span>
     </div>
 
   </mat-card-content>
-</mat-card>
+</mat-card>

projects/angular-material-extensions/password-strength/src/lib/component/mat-password-strength-info/mat-password-strength-info.component.ts

@@ -98,6 +98,12 @@ export class MatPasswordStrengthInfoComponent implements OnInit {
   @Input()
   minCharsCriteriaMsg: string;
 
+  @Input()
+  matIconDone = "done";
+
+  @Input()
+  matIconError = "error";
+
   ngOnInit(): void {
     if (!this.minCharsCriteriaMsg) {
       this.minCharsCriteriaMsg = `contains at least ${this.passwordComponent.min} characters`