Add svgIcon attributes

with an svgIcon attribute, users have the option of using Material Icon ligature font (original design) or SVG Icon Sets.

Author: LakMoore

src/module/component/mat-password-strength-info/mat-password-strength-info.component.html

@@ -1,13 +1,13 @@
-<mat-card @list>
+<mat-card @list class="info-card">
   <mat-card-content>
     <div class="info-row" @items *ngIf="passwordComponent.enableLowerCaseLetterRule">
       <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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</mat-icon>
       </ng-template>
       <span>{{customCharsCriteriaMsg}}</span>
     </div>
@@ -76,10 +76,10 @@
       <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" svgIcon="done">done</mat-icon>
       </ng-template>
       <ng-template #error>
-        <mat-icon @negativeState color="warn">error</mat-icon>
+        <mat-icon @negativeState color="warn" svgIcon="error">error</mat-icon>
       </ng-template>
       <span>Password's strength = {{passwordComponent.strength}} %100</span>
     </div>