diff --git a/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html b/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html
index 68a1622fc2..5bda7adc93 100644
--- a/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html
+++ b/src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../', 'edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="primary" [routerLink]="['../', 'list-account-transactions']" *mifosxHasPermission="'READ_ACCOUNTTRANSFER'">
diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.html b/src/app/accounting/accounting-rules/accounting-rules.component.html
index 3e5ed68212..cae54e4a09 100644
--- a/src/app/accounting/accounting-rules/accounting-rules.component.html
+++ b/src/app/accounting/accounting-rules/accounting-rules.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Add Rule
   </button>
 </div>
diff --git a/src/app/accounting/accounting-rules/view-rule/view-rule.component.html b/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
index d9e1d3f7ae..54d814d333 100644
--- a/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
+++ b/src/app/accounting/accounting-rules/view-rule/view-rule.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingRule()" *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
index a21ed1a89d..2740981386 100644
--- a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
+++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
@@ -11,7 +11,7 @@
   </div>
   <div #buttonAddAccount>
     <button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add Account
     </button>
   </div>
diff --git a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
index 6bdd13b457..52e9c1bb18 100644
--- a/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
+++ b/src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html
@@ -1,30 +1,30 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
     <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Subledger Account
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="primary" [routerLink]="['edit']">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
       Edit
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock" class="m-r-10"></fa-icon>
       Disable
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
       Enable
     </button>
   </span>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/accounting/closing-entries/closing-entries.component.html b/src/app/accounting/closing-entries/closing-entries.component.html
index 2c6f146e7c..afe57e4d8a 100644
--- a/src/app/accounting/closing-entries/closing-entries.component.html
+++ b/src/app/accounting/closing-entries/closing-entries.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Closure
     </button>
   </div>
diff --git a/src/app/accounting/closing-entries/view-closure/view-closure.component.html b/src/app/accounting/closing-entries/view-closure/view-closure.component.html
index e78acbc89c..b9e6ad0a4b 100644
--- a/src/app/accounting/closing-entries/view-closure/view-closure.component.html
+++ b/src/app/accounting/closing-entries/view-closure/view-closure.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
index 52b5e26318..e37aa83047 100644
--- a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
+++ b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <div #buttonDefineMapping>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Define New Mapping
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Define New Mapping
     </button>
   </div>
 </div>
diff --git a/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html b/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
index a609a7fb80..ff048fc990 100644
--- a/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
+++ b/src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteFinancialActivityAccount()" *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/accounting/periodic-accruals/periodic-accruals.component.html b/src/app/accounting/periodic-accruals/periodic-accruals.component.html
index 8e2adb7662..1271802448 100644
--- a/src/app/accounting/periodic-accruals/periodic-accruals.component.html
+++ b/src/app/accounting/periodic-accruals/periodic-accruals.component.html
@@ -25,7 +25,7 @@
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
-          <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="play" class="m-r-10"></fa-icon>
           Run Periodic Accruals
         </button>
       </mat-card-actions>
diff --git a/src/app/accounting/provisioning-entries/provisioning-entries.component.html b/src/app/accounting/provisioning-entries/provisioning-entries.component.html
index 37faa4b4f0..39f928c231 100644
--- a/src/app/accounting/provisioning-entries/provisioning-entries.component.html
+++ b/src/app/accounting/provisioning-entries/provisioning-entries.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'VIEW_ALL_PROVISIONING_ENTRIES'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Provisioning Entry
   </button>
 </div>
@@ -39,7 +39,7 @@
         <th mat-header-cell *matHeaderCellDef> View Report </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
           </button>
         </td>
       </ng-container>
@@ -48,7 +48,7 @@
         <th mat-header-cell *matHeaderCellDef> Recreate Provisioning </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Recreate
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>Recreate
           </button>
         </td>
       </ng-container>
@@ -57,7 +57,7 @@
         <th mat-header-cell *matHeaderCellDef> View Journal Entry </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
           </button>
         </td>
       </ng-container>
diff --git a/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html b/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
index 25b0a8ed4d..d8ec543588 100644
--- a/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
+++ b/src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html
@@ -2,7 +2,7 @@
 
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry" *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Journal Entries
     </button>
   </div>
diff --git a/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html b/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
index be36cb07b7..471ea2938f 100644
--- a/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
+++ b/src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html
@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateCenterForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html b/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
index ffa0c9ea37..73151397f7 100644
--- a/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
+++ b/src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit Schedule
   </button>
 </div>
diff --git a/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html b/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html
index 7d371566a2..52ec043819 100644
--- a/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html
+++ b/src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html
@@ -2,7 +2,7 @@
 
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;Back
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back
     </button>
   </div>
 
diff --git a/src/app/centers/centers-view/notes-tab/notes-tab.component.html b/src/app/centers/centers-view/notes-tab/notes-tab.component.html
index d686e1b69b..7efe0c6c90 100644
--- a/src/app/centers/centers-view/notes-tab/notes-tab.component.html
+++ b/src/app/centers/centers-view/notes-tab/notes-tab.component.html
@@ -7,7 +7,7 @@ <h3>Notes</h3>
         <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
       </mat-form-field>
       <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid" *mifosxHasPermission="'CREATE_GROUPNOTE'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> Add
       </button>
     </form>
   </div>
diff --git a/src/app/centers/centers.component.html b/src/app/centers/centers.component.html
index 8ab1b3ace5..22ad13caa0 100644
--- a/src/app/centers/centers.component.html
+++ b/src/app/centers/centers.component.html
@@ -12,10 +12,10 @@
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Centers']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Center
+        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Center
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Center
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Center
       </button>
     </div>
   </div>
diff --git a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
index 980711b990..a8107a8f5f 100644
--- a/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
+++ b/src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html
@@ -39,7 +39,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
index ca257f03d2..8ec1e6ecd5 100644
--- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
+++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html
@@ -4,7 +4,7 @@ <h3>Family Members</h3>
 
     <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
       <button mat-raised-button color="primary" (click)="addFamilyMember()">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
       </button>
     </div>
 
@@ -34,7 +34,7 @@ <h3>Family Members</h3>
             <fa-icon icon="trash"></fa-icon>
           </button>
         </div>
-        
+
         <p>
           First Name : {{ member.firstName }}<br />
           Middle Name : {{ member.middleName }}<br />
@@ -55,7 +55,7 @@ <h3>Family Members</h3>
 
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious>
-        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
         Previous
       </button>
       <button mat-raised-button matStepperNext>
diff --git a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
index c174206bf4..7df234f875 100644
--- a/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
+++ b/src/app/clients/client-stepper/client-general-step/client-general-step.component.html
@@ -213,7 +213,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/clients/clients-view/address-tab/address-tab.component.html b/src/app/clients/clients-view/address-tab/address-tab.component.html
index 7b2398fc32..1f4a7acf0b 100644
--- a/src/app/clients/clients-view/address-tab/address-tab.component.html
+++ b/src/app/clients/clients-view/address-tab/address-tab.component.html
@@ -4,7 +4,7 @@ <h3>Address</h3>
 
   <div fxLayout="row" fxLayoutAlign="flex-end">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
   </div>
 
diff --git a/src/app/clients/clients-view/charges/view-charge/view-charge.component.html b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
index 452924a369..ca24bbae58 100644
--- a/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
+++ b/src/app/clients/clients-view/charges/view-charge/view-charge.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
-    <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
     Pay
   </button>
   <button mat-raised-button color="primary" (click)="waiveCharge()" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
@@ -8,7 +8,7 @@
     Waive Charge
   </button>
   <button mat-raised-button color="primary" (click)="deleteCharge()">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -111,7 +111,7 @@ <h1><b> Transactions </b></h1>
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
-              <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>
             </button>
           </td>
         </ng-container>
diff --git a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
index d90385c36f..ca23865ec2 100644
--- a/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
+++ b/src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html
@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateClientForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
index 46c603c736..5ace2b29a2 100644
--- a/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
+++ b/src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html
@@ -27,7 +27,7 @@
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!clientScreenReportForm.valid">
-          <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report</button>
+          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report</button>
       </mat-card-actions>
 
     </form>
@@ -42,7 +42,7 @@
 
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="file" class="m-r-10"></fa-icon>
         Print
       </button>
     </div>
diff --git a/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html b/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
index 8b4147a380..aa56258916 100644
--- a/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
+++ b/src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html
@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!undoClientRejectionForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html b/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
index b0eea34357..c59eb938aa 100644
--- a/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
+++ b/src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayoutAlign="end">
   <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Take Survey
   </button>
 </div>
diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html
index 2efc5bd9ae..79352a8ac9 100644
--- a/src/app/clients/clients-view/clients-view.component.html
+++ b/src/app/clients/clients-view/clients-view.component.html
@@ -73,7 +73,7 @@ <h3 fxFlex="95%">
           <span>Edit</span>
         </button>
 
-        <button mat-menu-item [matMenuTriggerFor]="accountApplications">
+        <button *ngIf="isActive()" mat-menu-item [matMenuTriggerFor]="accountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>
diff --git a/src/app/clients/clients-view/clients-view.component.ts b/src/app/clients/clients-view/clients-view.component.ts
index f493918192..f252281622 100644
--- a/src/app/clients/clients-view/clients-view.component.ts
+++ b/src/app/clients/clients-view/clients-view.component.ts
@@ -52,6 +52,10 @@ export class ClientsViewComponent implements OnInit {
     );
   }
 
+  isActive(): boolean {
+    return (this.clientViewData.status.value === 'Active');
+  }
+
   /**
    * Performs action button/option action.
    * @param {string} name action name.
diff --git a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
index 1380429f7b..26f4d5ae20 100644
--- a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
@@ -15,7 +15,7 @@ <h1 mat-dialog-title align="center">Capture Client Image</h1>
       Capture
     </button>
     <button *ngIf="isCaptured" mat-stroked-button color="primary" (click)="recapture()">
-      <fa-icon icon="undo" size="sm"></fa-icon>&nbsp;&nbsp;Recapture
+      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>Recapture
     </button>
   </div>
 
diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
index 34381afaf9..e65b1a20f0 100644
--- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
+++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
@@ -6,7 +6,7 @@ <h3>Family Members</h3>
 
     <div fxLayout="row" fxLayoutAlign="flex-end">
       <button mat-raised-button color="primary" [routerLink]="['./add']">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
       </button>
     </div>
 
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.html b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
index a06a334994..54271ef93d 100644
--- a/src/app/clients/clients-view/identities-tab/identities-tab.component.html
+++ b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
@@ -3,7 +3,7 @@
     <h3>Identities</h3>
 
     <button mat-raised-button class="f-right" color="primary" (click)="addIdentifier()" *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon> Add
     </button>
 
     <table mat-table #identifiersTable [dataSource]="clientIdentities">
diff --git a/src/app/collaterals/view-collateral/view-collateral.component.html b/src/app/collaterals/view-collateral/view-collateral.component.html
index 97b4d8d5c0..02fe04fda9 100644
--- a/src/app/collaterals/view-collateral/view-collateral.component.html
+++ b/src/app/collaterals/view-collateral/view-collateral.component.html
@@ -1,14 +1,14 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
       Edit
     </button>
     <button mat-raised-button color="warn" (click)="deleteCollateral()" *mifosxHasPermission="'DELETE_CHARGE'">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
       Delete
     </button>
   </div>
-  
+
 <mat-card class="client-collateral-card">
 
     <mat-card-content class="content">\
@@ -16,7 +16,7 @@
         <div class="tab-container mat-typography">
 
             <h3>Client Collateral Details</h3>
-          
+
             <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
               <p>
                 Name: {{ clientCollateralData.name }}<br/>
@@ -24,9 +24,9 @@ <h3>Client Collateral Details</h3>
                 Total Value: {{ clientCollateralData.total }}<br/>
                 Total Collateral Value: {{ clientCollateralData.totalCollateral }}<br/>
               </p>
-              
+
             </div>
-        
+
 
             <h3>Transaction Details</h3>
 
@@ -60,12 +60,12 @@ <h3>Transaction Details</h3>
             <tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'loans-accounts', 'create']" class="select-row"></tr> -->
             <tr mat-header-row *matHeaderRowDef="collateralColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: collateralColumns;"></tr>
-      
+
             </table>
 
         </div>
 
 
     </mat-card-content>
-        
-</mat-card>
\ No newline at end of file
+
+</mat-card>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html
index bbfb956479..1f9a6f7ce7 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html
@@ -12,7 +12,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -100,7 +100,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext [disabled]="!fixedDepositAccountFormValid">
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html
index 9a6cb041d6..221b0993a5 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html
@@ -21,7 +21,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html
index d6e6f85d6b..b1177413a6 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-step.component.html
@@ -38,7 +38,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html
index fd034a6401..ed26bb159a 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html
@@ -53,11 +53,11 @@
       <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
         <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
           <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>
             View Incentives
           </span>
           <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-            <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
             Hide Incentives
           </span>
         </button>
@@ -139,7 +139,7 @@ <h4 class="m-b-10" fxFlex="13%">
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html
index dbc71c1f15..ad6d5ea217 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html
@@ -159,107 +159,107 @@ <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
         <td mat-cell *matCellDef="let chartSlab">
           {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
-  
+
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> Amount Range </th>
         <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
-  
+
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> Interest </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
           <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye" class="m-r-10"></fa-icon>
               View Incentives
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
               Hide Incentives
             </span>
           </button>
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="incentives">
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-  
+
           <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-  
+
             <mat-card fxLayout="row wrap" fxFlexFill>
-  
+
               <h4 class="m-b-10" fxFlex="13%">
                 Incentives
               </h4>
-  
+
               <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives.length">
-  
+
                 <ng-container matColumnDef="entityType">
                   <th mat-header-cell *matHeaderCellDef> Entity Type </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="attributeName">
                   <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="conditionType">
                   <th mat-header-cell *matHeaderCellDef> Condition Type </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="attributeValue">
                   <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="incentiveType">
                   <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="amount">
                   <th mat-header-cell *matHeaderCellDef> Interest </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>
                 </ng-container>
-  
+
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-  
+
               </table>
-  
+
             </mat-card>
           </div>
         </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
       <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-  
+
     </table>
 
   </div>
@@ -336,7 +336,7 @@ <h3 class="mat-h3" fxFlexFill>Charges</h3>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html
index b07b1287cf..3e7c60e639 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html
@@ -123,19 +123,19 @@ <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-p">
         Is Withhold Tax Applicable?
       </mat-checkbox>
-  
+
       <mat-form-field fxFlex="48%" *ngIf="fixedDepositAccountSettingsForm.controls.taxGroupId" class="p-b-25">
         <mat-label>Tax Group</mat-label>
         <input matInput formControlName="taxGroupId">
       </mat-form-field>
 
     </ng-container>
-   
+
   </div>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html
index f3597645c4..f2462963c3 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html
@@ -90,7 +90,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
index 64f3a19506..3fff0487a1 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
@@ -15,107 +15,107 @@ <h3>All Interest Rates</h3>
         <td mat-cell *matCellDef="let chartSlab">
           {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
       </ng-container>
-  
+
       <ng-container matColumnDef="amountRange">
         <th mat-header-cell *matHeaderCellDef> Amount Range </th>
         <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
       </ng-container>
-  
+
       <ng-container matColumnDef="interest">
         <th mat-header-cell *matHeaderCellDef> Interest </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
         <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
           <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye" class="m-r-10"></fa-icon>
               View Incentives
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
               Hide Incentives
             </span>
           </button>
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="incentives">
         <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
-  
+
           <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">
-  
+
             <mat-card fxLayout="row wrap" fxFlexFill>
-  
+
               <h4 class="m-b-10" fxFlex="13%">
                 Incentives
               </h4>
-  
+
               <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives?.length">
-  
+
                 <ng-container matColumnDef="entityType">
                   <th mat-header-cell *matHeaderCellDef> Entity Type </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.entityType.value }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="attributeName">
                   <th mat-header-cell *matHeaderCellDef> Attribute Name </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.attributeName.value }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="conditionType">
                   <th mat-header-cell *matHeaderCellDef> Condition Type </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.conditionType.value | titlecase }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="attributeValue">
                   <th mat-header-cell *matHeaderCellDef> Attribute Value </th>
                   <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                     {{ incentive.attributeValueDesc }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="incentiveType">
                   <th mat-header-cell *matHeaderCellDef> Incentive Type </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.incentiveType.value }}
                   </td>
                 </ng-container>
-  
+
                 <ng-container matColumnDef="amount">
                   <th mat-header-cell *matHeaderCellDef> Interest </th>
                   <td mat-cell *matCellDef="let incentive">
                     {{ incentive.amount }}
                   </td>
                 </ng-container>
-  
+
                 <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
-  
+
               </table>
-  
+
             </mat-card>
           </div>
         </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
       <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
-  
+
     </table>
 
   </div>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html
index 4ba0ffb4dc..26f26dcf3e 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html
@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateFixedDepositsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html
index 95fb5c6991..622e177738 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html
+++ b/src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html
@@ -29,7 +29,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!approveFixedDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!approveFixedDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html
index d2986fcced..6b7fab3703 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html
@@ -21,7 +21,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html
index 7ac5b32cc4..db723531b4 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html
@@ -30,7 +30,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!approveRecurringDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html
index 7411327fbf..50bc6d8edb 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html
@@ -25,7 +25,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!prematureCloseRecurringDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!prematureCloseRecurringDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html
index babca72826..6758386015 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html
@@ -30,7 +30,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!rejectRecurringDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html
index c71c202b7e..750b1a7b7d 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html
@@ -12,7 +12,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -70,7 +70,7 @@
         </button>
       </td>
     </ng-container>
-    
+
     <ng-container matColumnDef="repaymentsEvery">
       <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
       <td mat-cell *matCellDef="let charge">
@@ -101,7 +101,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext [disabled]="!recurringDepositAccountFormValid">
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html
index 2a243aec62..364a03bad0 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html
@@ -17,7 +17,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html
index 41f75b8ba7..290516c5ff 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html
@@ -38,7 +38,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html
index 8ca6d1027b..dbb08623d8 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html
@@ -55,11 +55,11 @@
         <button mat-button color="primary"
           (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
           <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>
             View Incentives
           </span>
           <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-            <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
             Hide Incentives
           </span>
         </button>
@@ -144,7 +144,7 @@ <h4 class="m-b-10" fxFlex="13%">
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
index 57f18a6644..bd7389381a 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html
@@ -187,11 +187,11 @@ <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
           <button mat-button color="primary"
             (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye" class="m-r-10"></fa-icon>
               View Incentives
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
               Hide Incentives
             </span>
           </button>
@@ -346,7 +346,7 @@ <h3 class="mat-h3" fxFlexFill>Charges</h3>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
index fdf27b0557..715fe1deaf 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html
@@ -172,7 +172,7 @@ <h4 fxFlex="98%" class="mat-h4">For Pre-mature closure</h4>
           {{ preClosurePenalInterestOnType.value }}
         </mat-option>
       </mat-select>
-    </mat-form-field> 
+    </mat-form-field>
 
     <!-- <mat-divider fxFlex="98%"></mat-divider> -->
 
@@ -187,7 +187,7 @@ <h4 fxFlex="98%" class="mat-h4">Tax Group</h4>
       <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
         Is Withhold Tax Applicable?
       </mat-checkbox>
-    
+
       <mat-form-field fxFlex="48%" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
         <mat-label>Tax Group</mat-label>
         <input type="text" matInput formControlName="taxGroupId">
@@ -198,7 +198,7 @@ <h4 fxFlex="98%" class="mat-h4">Tax Group</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html
index 6d1c5e4c5f..c513193f33 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html
@@ -58,7 +58,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
index 3df3050509..5972570fac 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html
@@ -37,11 +37,11 @@ <h3>All Interest Rates</h3>
           <button mat-button color="primary"
             (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
             <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-              <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye" class="m-r-10"></fa-icon>
               View Incentives
             </span>
             <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-              <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
               Hide Incentives
             </span>
           </button>
diff --git a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
index d294045050..173f89d629 100644
--- a/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
+++ b/src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html
@@ -4,13 +4,13 @@
     <button mat-raised-button color="primary"
       *ngIf="!(transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true')"
       [routerLink]="'edit'">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
     </button>
   </span>
   <button mat-raised-button color="warn"
     *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
     (click)="undoTransaction()">
-    <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Undo
+    <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
   </button>
 </div>
 
diff --git a/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html b/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html
index ecdb72c245..a6b94950c3 100644
--- a/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html
+++ b/src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html
@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateGroupForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateGroupForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html b/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html
index 2d890c747c..86ca190fa4 100644
--- a/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html
+++ b/src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit Schedule
   </button>
 </div>
@@ -64,7 +64,7 @@
             (JLG Loans, Recurring Deposits etc) dependent on this meeting.
           </mat-hint>
         </mat-form-field>
-  
+
         </div>
 
       </mat-card-content>
diff --git a/src/app/groups/groups.component.html b/src/app/groups/groups.component.html
index 32c53720ef..47d422ad4c 100644
--- a/src/app/groups/groups.component.html
+++ b/src/app/groups/groups.component.html
@@ -9,10 +9,10 @@
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
-        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Group
+        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Group
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Group
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Group
       </button>
     </div>
   </div>
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 6faa1f2a04..e5f40e55c9 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -2,7 +2,7 @@
 
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
-      <fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Dashboard' | translate }}
     </button>
   </div>
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
index 6b6b4015f1..1e8caf0195 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-charges-step.component.html
@@ -8,47 +8,47 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-  
+
     <div fxFlex="48%" fxFlexAlign="center">
       <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
         Add
       </button>
     </div>
-  
+
     <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
-  
+
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Name </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.name + ', ' + charge.currency.displaySymbol }}
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="chargeCalculationType">
         <th mat-header-cell *matHeaderCellDef> Type </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeCalculationType.value }}
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef> Amount </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.amount }} 
+          {{ charge.amount }}
           <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
             <fa-icon icon="pen"></fa-icon>
           </button>
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="chargeTimeType">
         <th mat-header-cell *matHeaderCellDef> Collected On </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="date">
         <th mat-header-cell *matHeaderCellDef> Date </th>
         <td mat-cell *matCellDef="let charge">
@@ -58,32 +58,32 @@
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
             {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
           </span>
-          <span 
+          <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
             N/A
           </span>
           <button mat-icon-button color="primary"
             *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
-                    || charge.chargeTimeType.value === 'Specified due date'" 
+                    || charge.chargeTimeType.value === 'Specified due date'"
             (click)="editChargeDate(charge)">
             <fa-icon icon="pen"></fa-icon>
           </button>
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="repaymentsEvery">
         <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.feeInterval || 'Not Provided' }} 
-          <button mat-icon-button color="primary" 
+          {{ charge.feeInterval || 'Not Provided' }}
+          <button mat-icon-button color="primary"
             *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
             (click)="editChargeFeeInterval(charge)">
             <fa-icon icon="pen"></fa-icon>
           </button>
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="action">
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let charge">
@@ -92,15 +92,15 @@
           </button>
         </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  
+
     </table>
-  
+
     <div fxFlex="98%" *ngIf="activeClientMembers">
       <table fxFlex="98%" mat-table [dataSource]="dataSource">
-  
+
         <!-- Check Column -->
         <ng-container matColumnDef="check">
             <th mat-header-cell *matHeaderCellDef>
@@ -110,13 +110,13 @@
                 <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
             </td>
         </ng-container>
-    
+
         <!-- Position Column -->
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef> Client ID </th>
           <td mat-cell *matCellDef="let element"> {{element.id}} </td>
         </ng-container>
-    
+
         <!-- Name Column -->
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef> Client Name </th>
@@ -147,19 +147,19 @@
             </mat-form-field>
           </td>
         </ng-container>
-    
-    
+
+
         <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
       </table>
     </div>
-    
-  
+
+
   </div>
-  
+
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
@@ -167,4 +167,3 @@
       <fa-icon icon="arrow-right"></fa-icon>
     </button>
   </div>
-  
\ No newline at end of file
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
index f90328ba3e..7137d593ed 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-step.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="loansAccountDetailsForm">
 
     <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  
+
       <mat-form-field fxFlex="48%">
         <mat-label>Product Name</mat-label>
         <mat-select formControlName="productId" required>
@@ -13,7 +13,7 @@
           Product Name is <strong>required</strong>
         </mat-error>
       </mat-form-field>
-  
+
       <mat-form-field fxFlex="48%">
         <mat-label>Loan officer</mat-label>
         <mat-select formControlName="loanOfficerId">
@@ -22,8 +22,8 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-  
-  
+
+
       <mat-form-field fxFlex="48%">
         <mat-label>Fund</mat-label>
         <mat-select formControlName="fundId">
@@ -32,7 +32,7 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-  
+
       <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
         <mat-label>Submitted on</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
@@ -43,7 +43,7 @@
           Submitted on is <strong>required</strong>
         </mat-error>
       </mat-form-field>
-  
+
       <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
         <mat-label>Disbursement on</mat-label>
         <input matInput [min]="loansAccountDetailsForm.value.submittedOnDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
@@ -54,13 +54,13 @@
           Disbursement on is <strong>required</strong>
         </mat-error>
       </mat-form-field>
-  
-      
-  
+
+
+
       <mat-divider fxFlex="98%"></mat-divider>
-  
+
       <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
-  
+
       <mat-form-field fxFlex="48%">
         <mat-label>Link savings</mat-label>
         <mat-select formControlName="linkAccountId">
@@ -69,14 +69,14 @@ <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
           </mat-option>
         </mat-select>
       </mat-form-field>
-  
-      
-  
+
+
+
     </div>
-  
+
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious disabled>
-        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
         Previous
       </button>
       <button mat-raised-button matStepperNext>
@@ -84,6 +84,5 @@ <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
         <fa-icon icon="arrow-right"></fa-icon>
       </button>
     </div>
-  
+
   </form>
-  
\ No newline at end of file
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
index fb46fd4eb7..20ddce3fe2 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html
@@ -1,66 +1,66 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
     <h3 class="mat-h3" fxFlexFill>Details</h3>
-  
+
     <mat-divider fxFlexFill></mat-divider>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Product:</span>
       <span fxFlex="60%">{{ loansAccount.productId | find:loansAccountTemplate.productOptions:'id':'name' }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
       <span fxFlex="40%">Loan officer:</span>
       <span
         fxFlex="60%">{{ loansAccount.loanOfficerId | find:loansAccountProductTemplate.loanOfficerOptions:'id':'displayName'}}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
       <span fxFlex="40%">Loan purpose:</span>
       <span
         fxFlex="60%">{{ loansAccount.loanPurposeId | find:loansAccountProductTemplate.loanPurposeOptions:'id':'name'}}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.fundId">
       <span fxFlex="40%">Fund:</span>
       <span fxFlex="60%">{{ loansAccount.fundId | find:loansAccountProductTemplate.fundOptions:'id':'name'}}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Submitted on:</span>
       <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Disbursement on:</span>
       <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.externalId">
       <span fxFlex="40%">External id:</span>
       <span fxFlex="60%">{{ loansAccount.externalId }}</span>
     </div>
-  
+
     <h3 class="mat-h3" fxFlexFill>Terms</h3>
-  
+
     <mat-divider fxFlexFill></mat-divider>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Principal:</span>
       <span fxFlex="60%">{{ loansAccount.principal }} {{loansAccountProductTemplate.currency.DisplaySymbol}}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Loan term:</span>
       <span fxFlex="60%">{{ loansAccount.loanTermFrequency }}
         {{loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions:'id':'name'}}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Number of repayments:</span>
       <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Repaid every:</span>
       <span fxFlex="60%">{{loansAccount.repaymentEvery}}
@@ -68,137 +68,137 @@ <h3 class="mat-h3" fxFlexFill>Terms</h3>
         {{loansAccount.repaymentFrequencyNthDayType | find: loansAccountProductTemplate.repaymentFrequencyNthDayTypeOptions:'id': 'name'}}
         {{loansAccount.repaymentFrequencyDayOfWeekType | find: loansAccountProductTemplate.repaymentFrequencyDaysOfWeekTypeOptions:'id': 'name'}}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
       <span fxFlex="40%">First repayment on:</span>
       <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
       <span fxFlex="40%">Interest charged from:</span>
       <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
       <span fxFlex="40%">Nominal interest rate:</span>
       <span
         fxFlex="60%">{{loansAccount.interestRatePerPeriod}}&nbsp;&nbsp;{{loansAccountProductTemplate.interestRateFrequencyType.value}}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.interestType">
       <span fxFlex="40%">Interest method: </span>
       <span fxFlex="60%">{{loansAccount.interestType}}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
       <span fxFlex="40%">Is Equal Amortization:</span>
       <span fxFlex="60%">{{loansAccount.isEqualAmortization}}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Amortization</span>
       <span
         fxFlex="60%">{{ loansAccount.amortizationType | find:loansAccountProductTemplate.amortizationTypeOptions:'id':'value' }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Interest calculation period: </span>
       <span
         fxFlex="60%">{{ loansAccount.interestCalculationPeriodType | find:loansAccountProductTemplate.interestCalculationPeriodTypeOptions:'id':'value'  }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalcualtion">
       <span fxFlex="40%">Calculate interest for exact days in partial period:</span>
       <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalcualtion }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
       <span fxFlex="40%">Arrears tolerance: </span>
       <span
         fxFlex="60%">{{loansAccount.inArrearsTolerance}}&nbsp;{{loansAccountProductTemplate.currency.displaySymbol}}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
       <span fxFlex="40%">Interest free period: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Repayment strategy: </span>
       <span
         fxFlex="60%">{{ loansAccount.transactionProcessingStrategyCode | find:loansAccountTemplate.transactionProcessingStrategyOptions:'code':'name' }}</span>
     </div>
-  
+
     <h3 class="mat-h3" fxFlexFill>Moratorium</h3>
-  
+
     <mat-divider fxFlexFill></mat-divider>
-  
+
     <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
       <span fxFlex="40%">On principal payment: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
       <span fxFlex="40%">On interest payment: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
       <span fxFlex="40%">On Arrears Aging: </span>
       <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.isTopup">
       <span fxFlex="40%">Is Topup Loan? </span>
       <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
     </div>
-  
+
     <div fxFlexFill>
       <span fxFlex="40%">Recalculate Interest: </span>
       <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled? 'Yes' : 'No' }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
       <span fxFlex="40%">Days in month: </span>
       <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-  
+
       <h3 class="mat-h3" fxFlexFill>Charges</h3>
-  
+
       <mat-divider fxFlexFill></mat-divider>
-  
+
       <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
-  
+
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef> Name </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.name + ', ' + charge.currency.displaySymbol }}
           </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="chargeCalculationType">
           <th mat-header-cell *matHeaderCellDef> Type </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.chargeCalculationType.value }}
           </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="amount">
           <th mat-header-cell *matHeaderCellDef> Amount </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.amount }}
           </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="chargeTimeType">
           <th mat-header-cell *matHeaderCellDef> Collected On </th>
           <td mat-cell *matCellDef="let charge">
             {{ charge.chargeTimeType.value }}
           </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="date">
           <th mat-header-cell *matHeaderCellDef> Date </th>
           <td mat-cell *matCellDef="let charge">
@@ -216,52 +216,52 @@ <h3 class="mat-h3" fxFlexFill>Charges</h3>
             </span>
           </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
-  
+
       </table>
-  
+
     </div>
-  
+
     <div fxFlexFill *ngIf="loansAccountProductTemplate.overdueCharges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-  
+
       <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
-  
+
       <mat-divider fxFlex="98%"></mat-divider>
-  
+
       <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
-  
+
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef> Name </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="type">
           <th mat-header-cell *matHeaderCellDef> Type </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="amount">
           <th mat-header-cell *matHeaderCellDef> Amount </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.amount| number }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="collectedon">
           <th mat-header-cell *matHeaderCellDef> Collected On </th>
           <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="overdueChargesDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: overdueChargesDisplayedColumns;"></tr>
       </table>
     </div>
-  
+
   </div>
-  
+
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button [routerLink]="['../']">
@@ -271,4 +271,3 @@ <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
       Submit
     </button>
   </div>
-  
\ No newline at end of file
diff --git a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
index 6c6ce6bb9f..5af9aab8ab 100644
--- a/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
+++ b/src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html
@@ -112,12 +112,12 @@ <h4 fxFlex="98%" class="mat-h4">Repaid Every</h4>
 
     </ng-container>
 
-    
+
 
     </div>
     <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
       <button mat-raised-button matStepperPrevious>
-        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
         Previous
       </button>
       <button mat-raised-button matStepperNext>
diff --git a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
index d662c9afee..3bae35c5d1 100644
--- a/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html
@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -120,7 +120,7 @@ <h4 fxFlex="98%" class="mat-h4">Overdue Charges</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
diff --git a/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html b/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
index 980711b990..a8107a8f5f 100644
--- a/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html
@@ -39,7 +39,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
index 2b616f8b92..858dd3fc0f 100644
--- a/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html
@@ -91,7 +91,7 @@ <h3 class="mat-h3" fxFlexFill>Savings Linkage</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
index a0c3c75f1f..0c7cd9f582 100644
--- a/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
@@ -261,7 +261,7 @@ <h3 fxFlex="98%" class="mat-h3">Overdue Charges</h3>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
index ea86f6e839..ac6c990ecb 100644
--- a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html
@@ -10,7 +10,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
index 6bc50e2427..aa2ae465af 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
@@ -379,7 +379,7 @@ <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
       <div fxLayout="column" fxFlex="50%">
         <div fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-raised-button color="primary" (click)="addCollateral()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
           </button>
         </div>
       </div>
@@ -422,7 +422,7 @@ <h4 fxFlex="98%" class="mat-h4">Collaterals Data</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index 4dc189c6e9..366f3105c1 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -72,242 +72,250 @@ const routes: Routes = [
       },
       {
         path: ':loanId',
-        component: LoansViewComponent,
         data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
         resolve: {
-          loanDetailsData: LoanDetailsResolver,
-          loanDatatables: LoanDatatablesResolver
+          loanDetailsData: LoanDetailsResolver
         },
         children: [
           {
             path: '',
-            redirectTo: 'general',
-            pathMatch: 'full'
-          },
-          {
-            path: 'general',
-            component: GeneralTabComponent,
-            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'accountdetail',
-            component: AccountDetailsComponent,
-            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'original-schedule',
-            component: OriginalScheduleTabComponent,
-            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'repayment-schedule',
-            component: RepaymentScheduleTabComponent,
-            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'transactions',
-            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+            component: LoansViewComponent,
+            resolve: {
+              loanDetailsData: LoanDetailsResolver,
+              loanDatatables: LoanDatatablesResolver
+            },
             children: [
               {
                 path: '',
-                component: TransactionsTabComponent
+                redirectTo: 'general',
+                pathMatch: 'full'
+              },
+              {
+                path: 'general',
+                component: GeneralTabComponent,
+                data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'accountdetail',
+                component: AccountDetailsComponent,
+                data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'original-schedule',
+                component: OriginalScheduleTabComponent,
+                data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'repayment-schedule',
+                component: RepaymentScheduleTabComponent,
+                data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'transactions',
+                data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                children: [
+                  {
+                    path: '',
+                    component: TransactionsTabComponent
 
+                  },
+                  {
+                    path: 'export',
+                    component: ExportTransactionsComponent
+                  }
+                ]
               },
               {
-                path: 'export',
-                component: ExportTransactionsComponent
-              }
-            ]
-          },
-          {
-            path: 'delinquencytags',
-            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
-            resolve: {
-              loanDelinquencyTagsData: LoanDelinquencyTagsResolver
-            },
-            children: [
+                path: 'delinquencytags',
+                data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+                resolve: {
+                  loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: LoanDelinquencyTagsTabComponent
+                  },
+                ]
+              },
               {
-                path: '',
-                component: LoanDelinquencyTagsTabComponent
+                path: 'loan-reschedules',
+                data: {},
+                resolve: {
+                  loanRescheduleData: LoanReschedulesResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: RescheduleLoanTabComponent
+                  }
+                ]
               },
-            ]
+              {
+                path: 'loan-collateral',
+                component: LoanCollateralTabComponent,
+                data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'loan-tranche-details',
+                component: LoanTrancheDetailsComponent,
+                data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'overdue-charges',
+                component: OverdueChargesTabComponent,
+                data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'floating-interest-rates',
+                component: FloatingInterestRatesComponent,
+                data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'charges',
+                data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+                component: ChargesTabComponent,
+              },
+              {
+                path: 'loan-documents',
+                component: LoanDocumentsTabComponent,
+                data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+                resolve: {
+                  loanDocuments: LoanDocumentsResolver
+                },
+              },
+              {
+                path: 'notes',
+                component: NotesTabComponent,
+                data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+                resolve: {
+                  loanNotes: LoanNotesResolver
+                },
+              },
+              {
+                path: 'standing-instruction',
+                component: StandingInstructionsTabComponent,
+                data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'datatables',
+                children: [{
+                  path: ':datatableName',
+                  component: DatatableTabComponent,
+                  data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                  resolve: {
+                    loanDatatable: LoanDatatableResolver
+                  }
+                }]
+              },
+            ],
           },
           {
-            path: 'loan-reschedules',
-            data: {},
+            path: 'transactions',
+            data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
             resolve: {
-              loanRescheduleData: LoanReschedulesResolver
+              loanDetailsAssociationData: LoanDetailsResolver
             },
             children: [
               {
                 path: '',
-                component: RescheduleLoanTabComponent
+                redirectTo: '../transactions', pathMatch: 'prefix'
+              },
+              {
+                path: ':id',
+                data: { routeParamBreadcrumb: 'id' },
+                children: [
+                  {
+                    path: '',
+                    component: ViewTransactionComponent,
+                    resolve: {
+                      loansAccountTransaction: LoansAccountTransactionResolver
+                    }
+                  },
+                  {
+                    path: 'edit',
+                    component: EditTransactionComponent,
+                    data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                    resolve: {
+                      loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                    }
+                  },
+                  {
+                    path: 'reciept',
+                    component: ViewRecieptComponent,
+                    data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+                    resolve: {
+                      loansTransactionReciept: LoansTransactionRecieptResolver
+                    }
+                  }
+                ]
               }
             ]
           },
-          {
-            path: 'loan-collateral',
-            component: LoanCollateralTabComponent,
-            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'loan-tranche-details',
-            component: LoanTrancheDetailsComponent,
-            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'overdue-charges',
-            component: OverdueChargesTabComponent,
-            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'floating-interest-rates',
-            component: FloatingInterestRatesComponent,
-            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
-          },
           {
             path: 'charges',
             data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-            component: ChargesTabComponent,
-          },
-          {
-            path: 'loan-documents',
-            component: LoanDocumentsTabComponent,
-            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-            resolve: {
-              loanDocuments: LoanDocumentsResolver
-            },
-          },
-          {
-            path: 'notes',
-            component: NotesTabComponent,
-            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-            resolve: {
-              loanNotes: LoanNotesResolver
-            },
-          },
-          {
-            path: 'standing-instruction',
-            component: StandingInstructionsTabComponent,
-            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'datatables',
-            children: [{
-              path: ':datatableName',
-              component: DatatableTabComponent,
-              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-              resolve: {
-                loanDatatable: LoanDatatableResolver
-              }
-            }]
-          },
-        ],
-      },
-      {
-        path: 'transactions',
-        data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-        resolve: {
-          loanDetailsAssociationData: LoanDetailsResolver
-        },
-        children: [
-          {
-            path: '',
-            redirectTo: '../transactions', pathMatch: 'prefix'
-          },
-          {
-            path: ':id',
-            data: { routeParamBreadcrumb: 'id' },
             children: [
               {
                 path: '',
-                component: ViewTransactionComponent,
-                resolve: {
-                  loansAccountTransaction: LoansAccountTransactionResolver
-                }
+                redirectTo: '../charges', pathMatch: 'prefix'
               },
               {
-                path: 'edit',
-                component: EditTransactionComponent,
-                data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                path: ':id',
+                data: { routeParamBreadcrumb: 'id' },
+                component: ViewChargeComponent,
                 resolve: {
-                  loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
-                }
-              },
-              {
-                path: 'reciept',
-                component: ViewRecieptComponent,
-                data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                resolve: {
-                  loansTransactionReciept: LoansTransactionRecieptResolver
+                  loansAccountCharge: LoansAccountChargeResolver,
+                  loanDetailsData: LoanDetailsResolver
                 }
               }
             ]
-          }
+          },
+          {
+            path: 'actions/:action',
+            component: LoanAccountActionsComponent,
+            data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+            resolve: {
+              actionButtonData: LoanActionButtonResolver
+            }
+          },
+          {
+            path: 'transfer-funds',
+            loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+          },
+          {
+            path: 'edit-loans-account',
+            data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+            component: EditLoansAccountComponent,
+            resolve: {
+              loansAccountAndTemplate: LoansAccountAndTemplateResolver
+            }
+          },
         ]
       },
       {
-        path: 'charges',
-        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+        path: 'glim-account',
         children: [
           {
-            path: '',
-            redirectTo: '../charges', pathMatch: 'prefix'
+            path: 'create',
+            data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
+            component: CreateGlimAccountComponent,
+            resolve: {
+              loansAccountTemplate: GLIMLoanTemplateResolver,
+              gsimData: GSIMAccountsResolver,
+              groupsData: GroupViewResolver,
+            },
           },
           {
-            path: ':id',
-            data: { routeParamBreadcrumb: 'id' },
-            component: ViewChargeComponent,
+            path: ':glimId',
+            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
+            component: GlimAccountComponent,
             resolve: {
-              loansAccountCharge: LoansAccountChargeResolver,
-              loanDetailsData: LoanDetailsResolver
-            }
+              glimData: GLIMViewResolver,
+              groupsData: GroupAccountsResolver
+            },
           }
         ]
-      },
-      {
-        path: 'actions/:action',
-        component: LoanAccountActionsComponent,
-        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
-        resolve: {
-          actionButtonData: LoanActionButtonResolver
-        }
-      },
-      {
-        path: 'transfer-funds',
-        loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
-      },
-      {
-        path: 'edit-loans-account',
-        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
-        component: EditLoansAccountComponent,
-        resolve: {
-          loansAccountAndTemplate: LoansAccountAndTemplateResolver
-        }
-      },
-    ]
-  },
-  {
-    path: 'glim-account',
-    children: [
-      {
-        path: 'create',
-        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
-        component: CreateGlimAccountComponent,
-        resolve: {
-          loansAccountTemplate: GLIMLoanTemplateResolver,
-          gsimData: GSIMAccountsResolver,
-          groupsData: GroupViewResolver,
-        },
-      },
-      {
-        path: ':glimId',
-        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        component: GlimAccountComponent,
-        resolve: {
-          glimData: GLIMViewResolver,
-          groupsData: GroupAccountsResolver
-        },
       }
     ]
   }
diff --git a/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html b/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
index 5327595ede..7c06c54c86 100644
--- a/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html
@@ -25,7 +25,7 @@
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
           <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
           <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-            <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
+            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report
           </button>
         </mat-card-actions>
 
@@ -43,7 +43,7 @@
 
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="file" class="m-r-10"></fa-icon>
         Print
       </button>
     </div>
diff --git a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html b/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
index 6cbc89bbe5..a444c70148 100644
--- a/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html
@@ -156,16 +156,16 @@ <h3>Guarantors Details</h3>
             <span *ngIf="!guarantor.guarantorFundingDetails">
               <button mat-raised-button class="account-action-button" color="primary"
                 *mifosxHasPermission="'READ_SAVINGSACCOUNT'" (click)="viewGuarantorDetails(guarantor)">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye" class="m-r-10"></fa-icon>
               </button>
               <button mat-raised-button class="account-action-button" color="primary"
                 *ngIf="guarantor.status && guarantor.guarantorType.id == 3 && guarantor.id">
-                <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="edit" class="m-r-10"></fa-icon>
               </button>
               <span *ngIf="guarantor.status">
                 <button mat-raised-button class="account-action-button" color="warn"
                   *mifosxHasPermission="'DELETE_GUARANTOR'" (click)="deleteGuarantor(guarantor.id)">
-                  <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="trash" class="m-r-10"></fa-icon>
                 </button>
               </span>
             </span>
diff --git a/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html b/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
index 191a799f2e..cfbd4a8a52 100644
--- a/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
+++ b/src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html
@@ -10,7 +10,7 @@ <h3>Loan Tranche Details</h3>
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="flex-end" fxLayoutGap="2%">
     <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()"
       (click)="addDisbursementDataEntry()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
     <button mat-raised-button color="primary" *ngIf="!pristine"
       (click)="editDisbursementData()">
diff --git a/src/app/loans/loans-view/loans-view.component.html b/src/app/loans/loans-view/loans-view.component.html
index e67dd47707..2b2bdd6ce0 100644
--- a/src/app/loans/loans-view/loans-view.component.html
+++ b/src/app/loans/loans-view/loans-view.component.html
@@ -192,7 +192,9 @@ <h3> Loan Account OverView </h3>
         </a>
       </ng-container>
     </nav>
+
     <router-outlet></router-outlet>
+
   </mat-card-content>
 
 </mat-card>
diff --git a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
index 8c100bcdf4..e58a052a14 100644
--- a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
+++ b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html
@@ -40,21 +40,6 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="updatedOnDate">
-      <th mat-header-cell *matHeaderCellDef> Updated On </th>
-      <td mat-cell *matCellDef="let item">
-        <span *ngIf="item.statusEnum.pendingApproval">
-          {{ item.timeline.submittedOnDate | dateFormat }}
-        </span>
-        <span *ngIf="item.statusEnum.approved">
-          {{ item.timeline.approvedOnDate | dateFormat }}
-        </span>
-        <span *ngIf="item.statusEnum.rejected">
-          {{ item.timeline.rejectedOnDate | dateFormat }}
-        </span>
-      </td>
-    </ng-container>
-
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let item">
diff --git a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.ts b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.ts
index 923d74a286..038ea49555 100644
--- a/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.ts
+++ b/src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.ts
@@ -14,7 +14,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 export class RescheduleLoanTabComponent implements OnInit {
 
   loanRescheduleData: any;
-  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'updatedOnDate', 'actions'];
+  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'actions'];
   clientId: any;
 
   constructor(private route: ActivatedRoute,
diff --git a/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html b/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
index 343fc176d0..19ff665e77 100644
--- a/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
+++ b/src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html
@@ -27,7 +27,7 @@
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
     <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs"></fa-icon>&nbsp;&nbsp;Generate Report &nbsp;</button>
+    <fa-icon icon="cogs" class="m-r-10"></fa-icon>Generate Report &nbsp;</button>
   </div>
 
 </form>
diff --git a/src/app/login/reset-password/reset-password.component.html b/src/app/login/reset-password/reset-password.component.html
index 3227d743c0..1780c5dc31 100644
--- a/src/app/login/reset-password/reset-password.component.html
+++ b/src/app/login/reset-password/reset-password.component.html
@@ -6,7 +6,7 @@
 
   <mat-form-field fxFlexAlign="center" class="reset-password-input">
     <span matPrefix>
-      <fa-icon icon="lock" size="lg"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock" size="lg" class="m-r-10"></fa-icon>
     </span>
     <mat-label>Password</mat-label>
     <input type="{{ passwordInputType }}" matInput required formControlName="password">
@@ -22,7 +22,7 @@
 
   <mat-form-field fxFlexAlign="center" class="reset-password-input">
     <span matPrefix>
-      <fa-icon icon="check-circle" size="lg"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="check-circle" size="lg" class="m-r-10"></fa-icon>
     </span>
     <mat-label>Confirm Password</mat-label>
     <input type="password" matInput required formControlName="repeatPassword">
diff --git a/src/app/login/two-factor-authentication/two-factor-authentication.component.html b/src/app/login/two-factor-authentication/two-factor-authentication.component.html
index fa8f794d77..6a0c816adb 100644
--- a/src/app/login/two-factor-authentication/two-factor-authentication.component.html
+++ b/src/app/login/two-factor-authentication/two-factor-authentication.component.html
@@ -30,7 +30,7 @@
 
   <mat-form-field fxFlexAlign="center" class="two-factor-auth-input">
     <span matPrefix>
-      <fa-icon icon="user-shield"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="user-shield" class="m-r-10"></fa-icon>
     </span>
     <mat-label>OTP</mat-label>
     <input type="password" matInput autocomplete="off" required formControlName="otp">
diff --git a/src/app/organization/adhoc-query/adhoc-query.component.html b/src/app/organization/adhoc-query/adhoc-query.component.html
index 39c6621bdd..3df2cf7eb6 100644
--- a/src/app/organization/adhoc-query/adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/adhoc-query.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ADHOC'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create AdHoc Query
   </button>
 </div>
diff --git a/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html b/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html
index ef695b7f3e..b3821fc0e7 100644
--- a/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html
+++ b/src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ADHOC'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteAdhocQuery()" *mifosxHasPermission="'DELETE_ADHOC'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/organization/currencies/currencies.component.html b/src/app/organization/currencies/currencies.component.html
index f0c39505a3..c5f72d7b27 100644
--- a/src/app/organization/currencies/currencies.component.html
+++ b/src/app/organization/currencies/currencies.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonAddEdit class="in-block">
   <button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Add/Edit
   </button>
   </div>
diff --git a/src/app/organization/employees/employees.component.html b/src/app/organization/employees/employees.component.html
index b056dadf3a..692ffa73e9 100644
--- a/src/app/organization/employees/employees.component.html
+++ b/src/app/organization/employees/employees.component.html
@@ -2,13 +2,13 @@
 
   <div #buttonImportEmployees>
     <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
-    <fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="upload" class="m-r-10"></fa-icon>
     Import Employees
   </button>
   </div>
   <div #buttonCreateEmployee>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Employee
   </button>
   </div>
diff --git a/src/app/organization/employees/view-employee/view-employee.component.html b/src/app/organization/employees/view-employee/view-employee.component.html
index 64239b2717..7fc7c84b23 100644
--- a/src/app/organization/employees/view-employee/view-employee.component.html
+++ b/src/app/organization/employees/view-employee/view-employee.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html b/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html
index 215ce1c16f..3277412b8a 100644
--- a/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html
+++ b/src/app/organization/entity-data-table-checks/entity-data-table-checks.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create
   </button>
 
@@ -54,7 +54,7 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <button mat-button (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)" color="warn" *mifosxHasPermission="'DELETE_ENTITY_DATATABLE_CHECK'">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
           </button>
         </td>
       </ng-container>
diff --git a/src/app/organization/holidays/holidays.component.html b/src/app/organization/holidays/holidays.component.html
index c336a31ff2..c21d646676 100644
--- a/src/app/organization/holidays/holidays.component.html
+++ b/src/app/organization/holidays/holidays.component.html
@@ -2,7 +2,7 @@
 
   <div #buttonCreateHoliday class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Holiday
   </button>
   </div>
diff --git a/src/app/organization/holidays/view-holidays/view-holidays.component.html b/src/app/organization/holidays/view-holidays/view-holidays.component.html
index 6b4fbff713..18eb0ebe1c 100644
--- a/src/app/organization/holidays/view-holidays/view-holidays.component.html
+++ b/src/app/organization/holidays/view-holidays/view-holidays.component.html
@@ -1,16 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
     <button mat-raised-button color="accent" (click)="activateHoliday()" *ngIf="holidayData.status.value !== 'Active'">
-      <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
       Activate
     </button>
   </span>
     <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
     <button mat-raised-button color="warn" (click)="deleteHoliday()" *mifosxHasPermission="'DELETE_HOLIDAY'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -65,4 +65,4 @@
 
     </mat-card>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html
index 3d3643d259..bc495ed2d0 100644
--- a/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html
@@ -15,7 +15,7 @@
               Provisioning Criteria is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex>
             <mat-label>Selected Products</mat-label>
             <mat-select formControlName="loanProducts" multiple>
@@ -41,7 +41,7 @@
           <th mat-header-cell *matHeaderCellDef> Category </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="minAge">
           <th mat-header-cell *matHeaderCellDef> Min Age </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
@@ -51,7 +51,7 @@
           <th mat-header-cell *matHeaderCellDef> Max Age </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="percentage">
           <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
@@ -61,7 +61,7 @@
           <th mat-header-cell *matHeaderCellDef> Liability Account </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="expenseAccount">
           <th mat-header-cell *matHeaderCellDef> Expense Account </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
@@ -71,18 +71,18 @@
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
-              <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="edit" class="m-r-10"></fa-icon>
               Edit
             </button>
           </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  
+
       </table>
 
-    </div>    
+    </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
       <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
diff --git a/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html
index 3dcbbe3918..a99c585d3e 100644
--- a/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html
@@ -15,7 +15,7 @@
               Provisioning Criteria is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex>
             <mat-label>Selected Products</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
@@ -41,7 +41,7 @@
           <th mat-header-cell *matHeaderCellDef> Category </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="minAge">
           <th mat-header-cell *matHeaderCellDef> Min Age </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
@@ -51,7 +51,7 @@
           <th mat-header-cell *matHeaderCellDef> Max Age </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="percentage">
           <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
@@ -61,7 +61,7 @@
           <th mat-header-cell *matHeaderCellDef> Liability Account </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="expenseAccount">
           <th mat-header-cell *matHeaderCellDef> Expense Account </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
@@ -71,18 +71,18 @@
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
-              <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="edit" class="m-r-10"></fa-icon>
               Edit
             </button>
           </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  
+
       </table>
 
-    </div>    
+    </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
       <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
diff --git a/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html
index 95e16bca58..44d3426c7f 100644
--- a/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Provisioning Criteria
   </button>
 </div>
diff --git a/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html b/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html
index 6b46324ce0..6253662d19 100644
--- a/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html
+++ b/src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CRITERIA'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteCriteria()" *mifosxHasPermission="'DELETE_CRITERIA'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -23,7 +23,7 @@ <h2 class="mat-h2" fxFlexFill>{{provisioningData.criteriaName}}</h2>
          <div fxFlexFill class="loanProduct">
           <span fxFlex="40%">Loan Product:</span>
           <span fxFlex="60%">{{ loanProducts }}</span>
-        </div> 
+        </div>
 
       </div>
 
@@ -35,12 +35,12 @@ <h2 class="mat-h2" fxFlexFill>{{provisioningData.criteriaName}}</h2>
             <th mat-header-cell *matHeaderCellDef> Category </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.categoryName}} </td>
           </ng-container>
-      
+
           <ng-container matColumnDef="minAge">
             <th mat-header-cell *matHeaderCellDef> Min Age </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.minAge}} </td>
           </ng-container>
-      
+
           <ng-container matColumnDef="maxAge">
             <th mat-header-cell *matHeaderCellDef> Max Age </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.maxAge}} </td>
@@ -60,7 +60,7 @@ <h2 class="mat-h2" fxFlexFill>{{provisioningData.criteriaName}}</h2>
             <th mat-header-cell *matHeaderCellDef> Expense Account </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.expenseName}} </td>
           </ng-container>
-      
+
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
diff --git a/src/app/organization/payment-types/payment-types.component.html b/src/app/organization/payment-types/payment-types.component.html
index 71967d18bf..eff91ad325 100644
--- a/src/app/organization/payment-types/payment-types.component.html
+++ b/src/app/organization/payment-types/payment-types.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Payment Type
   </button>
 
@@ -64,10 +64,10 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let paymentType">
           <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
           </button>
           <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
           </button>
         </td>
       </ng-container>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html
index 0e8a5b305c..6f22d869a8 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html
@@ -16,7 +16,7 @@ <h3 fxFlex="98%" class="mat-h3">Template Parameters</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!smsCampaignFormValid">
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html
index f3bdad6e5f..c537f24778 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html
@@ -19,7 +19,7 @@ <h3 fxFlex="98%" class="mat-h3">Business Rule Parameters</h3>
               {{param.label}} is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
             <mat-label>{{param.label}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
@@ -30,7 +30,7 @@ <h3 fxFlex="98%" class="mat-h3">Business Rule Parameters</h3>
               {{param.label}} is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex="48%" *ngSwitchCase="'select'">
             <mat-label>{{param.label}}</mat-label>
             <mat-select required [formControlName]="param.name" [compareWith]="compareOptions">
@@ -55,7 +55,7 @@ <h3 fxFlex="98%" class="mat-h3">Business Rule Parameters</h3>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious disabled>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html b/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html
index e9898c222b..db68e71bb2 100644
--- a/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html
@@ -10,7 +10,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" 
+    <mat-form-field fxFlex="48%"
       *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
       <mat-label>SMS Provider</mat-label>
       <mat-select formControlName="providerId">
@@ -39,7 +39,7 @@
     <mat-form-field fxFlex="48%"
       *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')" (click)="recurrenceStartDatePicker.open()">
       <mat-label>Schedule Date</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker" 
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker"
         formControlName="recurrenceStartDate" required>
       <mat-datepicker-toggle matSuffix [for]="recurrenceStartDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #recurrenceStartDatePicker></mat-datepicker>
@@ -109,7 +109,7 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%"
     *ngIf="!smsCampaignDetailsForm.controls.runReportId.value">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
@@ -118,9 +118,9 @@
     </button>
   </div>
 
-  <mifosx-business-rule-parameters 
+  <mifosx-business-rule-parameters
     *ngIf="smsCampaignDetailsForm.controls.runReportId.value"
-    [paramData]="paramData" 
+    [paramData]="paramData"
     (templateParameters)="passParameters($event)"
   >
   </mifosx-business-rule-parameters>
diff --git a/src/app/organization/sms-campaigns/sms-campaigns.component.html b/src/app/organization/sms-campaigns/sms-campaigns.component.html
index b2366eb64d..c946a200f2 100644
--- a/src/app/organization/sms-campaigns/sms-campaigns.component.html
+++ b/src/app/organization/sms-campaigns/sms-campaigns.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SMSCAMPAIGN'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create SMS Campaign
   </button>
 
@@ -39,7 +39,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Trigger Type </th>
         <td mat-cell *matCellDef="let smsCampaign"> {{ smsCampaign.triggerType.value }} </td>
       </ng-container>
-      
+
       <ng-container matColumnDef="campaignStatus.value">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
         <td mat-cell *matCellDef="let smsCampaign">
diff --git a/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html b/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html
index 905709533d..b5c9f24a47 100644
--- a/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html
+++ b/src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html
@@ -4,31 +4,31 @@
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
       <button mat-raised-button color="accent" *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'" (click)="activateCampaign()">
-        <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;Activate
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Activate
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'" (click)="closeCampaign()">
-        <fa-icon icon="times"></fa-icon>&nbsp;&nbsp;Close
+        <fa-icon icon="times" class="m-r-10"></fa-icon>Close
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="accent" *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'" (click)="reactivateCampaign()">
-        <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Reactivate
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>Reactivate
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'" (click)="deleteCampaign()">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
       </button>
     </span>
 
@@ -43,7 +43,7 @@
         <mat-tab label="Campaign">
 
           <div class="tab-content mat-typography">
-          
+
             <mat-list>
 
               <mat-list-item>
@@ -56,7 +56,7 @@
 
               <mat-list-item>
                 Status : {{ smsCampaignData.campaignStatus.value }}
-              </mat-list-item>  
+              </mat-list-item>
 
               <mat-list-item>
                 Trigger Type : {{ smsCampaignData.triggerType.value }}
@@ -105,7 +105,7 @@ <h3>Template Message :</h3>
 
                 <div class="search-button" >
                   <button mat-raised-button color="primary">
-                  <fa-icon icon="search"></fa-icon>&nbsp;&nbsp;Search</button>
+                  <fa-icon icon="search" class="m-r-10"></fa-icon>Search</button>
                 </div>
               </div>
 
@@ -134,7 +134,7 @@ <h3>Template Message :</h3>
               </ng-container>
 
               <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>    
+              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
             </table>
 
diff --git a/src/app/organization/tellers/cashiers/cashiers.component.html b/src/app/organization/tellers/cashiers/cashiers.component.html
index 230363765d..27a6b6eab7 100644
--- a/src/app/organization/tellers/cashiers/cashiers.component.html
+++ b/src/app/organization/tellers/cashiers/cashiers.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     New Cashier
   </button>
 
diff --git a/src/app/organization/tellers/cashiers/transactions/transactions.component.html b/src/app/organization/tellers/cashiers/transactions/transactions.component.html
index d219632e6e..76a4656fee 100644
--- a/src/app/organization/tellers/cashiers/transactions/transactions.component.html
+++ b/src/app/organization/tellers/cashiers/transactions/transactions.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="accent" [routerLink]="['../allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
-      <fa-icon icon="arrow-up"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
       Allocate Cash
   </button>
   <button mat-raised-button color="warn" [routerLink]="['../settle']" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">
-      <fa-icon icon="arrow-down"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
       Settle Cash
   </button>
 </div>
diff --git a/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
index 6b1c6bfc09..9689578567 100644
--- a/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
+++ b/src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CASHIER'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteCashier()" *mifosxHasPermission="'DELETECASHIER_TELLER'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/organization/tellers/tellers.component.html b/src/app/organization/tellers/tellers.component.html
index f25b0cc02b..eb04804218 100644
--- a/src/app/organization/tellers/tellers.component.html
+++ b/src/app/organization/tellers/tellers.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TELLER'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Teller
   </button>
 
@@ -35,7 +35,7 @@
         <td mat-cell *matCellDef="let teller">
           <div [className]="teller.status === 'ACTIVE' ? 'true' : 'false'">
             <fa-icon matTooltip="{{ teller.status === 'ACTIVE' ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
-          </div>    
+          </div>
         </td>
       </ng-container>
 
@@ -48,7 +48,7 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let teller" (click)="$event.stopPropagation()">
           <button mat-button color="primary" [routerLink]="[teller.id,'cashiers']">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View Cashiers
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>View Cashiers
           </button>
         </td>
       </ng-container>
diff --git a/src/app/organization/tellers/view-teller/view-teller.component.html b/src/app/organization/tellers/view-teller/view-teller.component.html
index 5001c8e453..09781e9753 100644
--- a/src/app/organization/tellers/view-teller/view-teller.component.html
+++ b/src/app/organization/tellers/view-teller/view-teller.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TELLER'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteTeller()" *mifosxHasPermission="'DELETE_TELLER'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -24,7 +24,7 @@
         <div fxFlex="50%">
           {{ tellerData.name }}
         </div>
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Office
         </div>
diff --git a/src/app/products/charges/charges.component.html b/src/app/products/charges/charges.component.html
index 837d4ae6db..4cc95fbe4b 100644
--- a/src/app/products/charges/charges.component.html
+++ b/src/app/products/charges/charges.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateCharge class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Charge
     </button>
   </div>
diff --git a/src/app/products/charges/view-charge/view-charge.component.html b/src/app/products/charges/view-charge/view-charge.component.html
index e1488b7bec..3221c34bb3 100644
--- a/src/app/products/charges/view-charge/view-charge.component.html
+++ b/src/app/products/charges/view-charge/view-charge.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteCharge()" *mifosxHasPermission="'DELETE_CHARGE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -16,11 +16,11 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Charge Name
         </div>
-          
+
         <div fxFlex="50%">
           {{ chargeData.name }}
         </div>
@@ -28,7 +28,7 @@
         <div fxFlex="50%" class="mat-body-strong">
           Charge Type
         </div>
-          
+
         <div fxFlex="50%">
           {{ chargeData.penalty === true ? 'Penalty' : 'Charge' }}
         </div>
diff --git a/src/app/products/collaterals/collaterals.component.html b/src/app/products/collaterals/collaterals.component.html
index 9d9275cc02..f32bed272b 100644
--- a/src/app/products/collaterals/collaterals.component.html
+++ b/src/app/products/collaterals/collaterals.component.html
@@ -1,28 +1,28 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Collateral
     </button>
   </div>
-  
+
   <div class="container">
-  
+
     <div fxLayout="row" fxLayoutGap="20px">
       <mat-form-field fxFlex>
         <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
         <input matInput (keyup)="applyFilter($event.target.value)">
       </mat-form-field>
     </div>
-  
+
     <div class="mat-elevation-z8">
-  
+
       <table mat-table [dataSource]="dataSource" matSort>
-  
+
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
           <td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="quality">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Quality/Type </th>
           <td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
@@ -42,15 +42,14 @@
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Unit Type </th>
           <td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-  
+
       </table>
-  
+
       <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-  
+
     </div>
-  
+
   </div>
-  
\ No newline at end of file
diff --git a/src/app/products/collaterals/view-collateral/view-collateral.component.html b/src/app/products/collaterals/view-collateral/view-collateral.component.html
index 4a10ec474c..af37bbf9bc 100644
--- a/src/app/products/collaterals/view-collateral/view-collateral.component.html
+++ b/src/app/products/collaterals/view-collateral/view-collateral.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="primary" [routerLink]="['edit']" >
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>
         Edit
     </button>
     <button mat-raised-button color="warn" (click)="deleteCollateral()" >
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>
         Delete
     </button>
 </div>
@@ -71,4 +71,4 @@
 
     </mat-card>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html
index 41800303b6..28615a7159 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html
@@ -110,7 +110,7 @@ <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -152,7 +152,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -194,7 +194,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -241,7 +241,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!fixedDepositProductFormValid">
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html
index 4a0d5881e5..8cb737e9f3 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html
@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -64,7 +64,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html
index 928030ad7d..57d502b7fb 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html
@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html
index 186060106e..57d702661e 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html
@@ -30,7 +30,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
index 18c8a62585..2ca2559021 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html
@@ -6,7 +6,7 @@ <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
 
     <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
         Add
       </button>
     </div>
@@ -55,7 +55,7 @@ <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
             Is primary grouping by amount?
           </mat-checkbox>
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Slab
           </button>
         </div>
@@ -105,11 +105,11 @@ <h3 class="mat-h3">It's required to add at least one Slab</h3>
               </button>
               <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                  <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye" class="m-r-10"></fa-icon>
                   View Incentives
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                  <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                   Hide Incentives
                 </span>
               </button>
@@ -129,7 +129,7 @@ <h4 class="mat-h4" fxFlex="13%">
 
                   <div fxFlex="83%">
                     <button mat-raised-button color="primary" (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
-                      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="plus" class="m-r-10"></fa-icon>
                       Add
                     </button>
                   </div>
@@ -217,7 +217,7 @@ <h4 class="mat-h4" fxFlex="13%">
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html
index 9058712b19..4dbef74e6b 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html
@@ -178,11 +178,11 @@ <h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
             <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex" [disabled]="chartSlab.incentives.length === 0">
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye" class="m-r-10"></fa-icon>
                 View Incentives
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                 Hide Incentives
               </span>
             </button>
@@ -448,7 +448,7 @@ <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
index fa894beb33..e98474d5c7 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html
@@ -116,7 +116,7 @@ <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
index dfaaf7dfa0..d5960911f0 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html
@@ -76,7 +76,7 @@ <h4 fxFlex="98%" class="mat-h4">Deposit Amount</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
index c1cf0e1f6c..d625e47816 100644
--- a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
+++ b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateFixedProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FIXEDDEPOSITPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Fixed Deposit Product
   </button>
 </div>
diff --git a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html
index dd90b1d866..ad9eb7c3b6 100644
--- a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html
+++ b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
@@ -218,11 +218,11 @@ <h3 class="mat-h3" fxFlexFill>Interest Rate Chart</h3>
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
                   <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-                      <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye" class="m-r-10"></fa-icon>
                       View Incentives
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-                      <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                       Hide Incentives
                     </span>
                   </button>
diff --git a/src/app/products/floating-rates/floating-rates.component.html b/src/app/products/floating-rates/floating-rates.component.html
index 0bdfa19d3c..f41bb87139 100644
--- a/src/app/products/floating-rates/floating-rates.component.html
+++ b/src/app/products/floating-rates/floating-rates.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FLOATINGRATE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Floating Rate
   </button>
 </div>
@@ -30,17 +30,17 @@
 
       <ng-container matColumnDef="isBaseLendingRate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Is base lending rate? </th>
-        <td mat-cell *matCellDef="let floatingRate"> 
+        <td mat-cell *matCellDef="let floatingRate">
           <fa-icon *ngIf="floatingRate.isBaseLendingRate" icon="check-circle" size="lg" class="is-base-lending-rate-or-active" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!floatingRate.isBaseLendingRate" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon> 
+          <fa-icon *ngIf="!floatingRate.isBaseLendingRate" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Active </th>
-          <td mat-cell *matCellDef="let floatingRate"> 
+          <td mat-cell *matCellDef="let floatingRate">
             <fa-icon *ngIf="floatingRate.isActive" icon="check-circle" size="lg" class="is-base-lending-rate-or-active" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!floatingRate.isActive" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon> 
+            <fa-icon *ngIf="!floatingRate.isActive" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon>
           </td>
         </ng-container>
 
diff --git a/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html b/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html
index 77f7563e07..ee4f64ce30 100644
--- a/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html
+++ b/src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FLOATINGRATE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 
diff --git a/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts b/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts
index aae194d097..ae8118bff3 100644
--- a/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts
+++ b/src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts
@@ -24,7 +24,7 @@ export class LoanProductAndTemplateResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanProductId = route.paramMap.get('productId');
+    const loanProductId = route.parent.paramMap.get('productId');
     return this.productsService.getLoanProduct(loanProductId, true);
   }
 
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
index f57fb8ef55..3789294740 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html
@@ -200,7 +200,7 @@ <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -242,7 +242,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -284,7 +284,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -331,7 +331,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!loanProductFormValid">
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html
index 0736ea7aae..db6d2045af 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html
@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -77,7 +77,7 @@ <h3 class="mat-h3">Overdue Charges</h3>
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(overdueCharge)" [disabled]="!overdueCharge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -130,7 +130,7 @@ <h3 class="mat-h3">Overdue Charges</h3>
 
 <div fxLayout="row" class="margin-t+" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html
index 92acedc584..8d11681928 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html
@@ -42,7 +42,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html
index 980711b990..a8107a8f5f 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html
@@ -39,7 +39,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
index f56d488f76..deaf226301 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html
@@ -54,7 +54,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
index 66ebaa9da7..fbbbe70979 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html
@@ -742,7 +742,7 @@ <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
index 9cada3921d..f2d62edbd2 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html
@@ -450,7 +450,7 @@ <h3 fxFlex="23%" class="mat-h3">Configurable Terms and Settings</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
index fb7e6da339..b81bccf018 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html
@@ -172,7 +172,7 @@ <h4 fxFlex="23%" class="mat-h4">Principal by loan cycle</h4>
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle)">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
           Add
         </button>
       </div>
@@ -235,7 +235,7 @@ <h4 fxFlex="23%" class="mat-h4">Number of repayments by loan cycle</h4>
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle)">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
           Add
         </button>
       </div>
@@ -298,7 +298,7 @@ <h4 fxFlex="23%" class="mat-h4">Nominal interest rate by loan cycle</h4>
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle)">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
           Add
         </button>
       </div>
@@ -392,7 +392,7 @@ <h4 fxFlex="98%" class="mat-h4">Repaid every</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/loan-products/loan-products.component.html b/src/app/products/loan-products/loan-products.component.html
index f2ee38678b..6edcbd8e84 100644
--- a/src/app/products/loan-products/loan-products.component.html
+++ b/src/app/products/loan-products/loan-products.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateLoanProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOANPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Loan Product
   </button>
   </div>
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
index 9fc8eeda72..dc64b58b29 100644
--- a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
+  <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
   </button>
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html
index 49f5015923..ce466d6674 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html
@@ -20,7 +20,7 @@ <h3 fxFlex="40%" class="mat-h3">Delinquency Ranges</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addDelinquencyRange()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html
index 10230063ad..61dd9fd97c 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DELINQUENCY_BUCKET'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Delinquency Bucket
   </button>
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html
index 0cf690edfc..4e65914f4d 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html
@@ -20,7 +20,7 @@ <h3 fxFlex="40%" class="mat-h3">Delinquency Ranges</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addDelinquencyRange()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html b/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html
index cb4b92173f..81323f4fae 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html
@@ -1,10 +1,10 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DELINQUENCY_BUCKET'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteDelinquencyBucket()" *mifosxHasPermission="'DELETE_DELINQUENCY_BUCKET'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html b/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html
index 25051a0f97..f1e6601c69 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DELINQUENCY_RANGE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Delinquency Range
   </button>
 </div>
diff --git a/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html b/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html
index 6f98a71187..a323b76e7d 100644
--- a/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html
+++ b/src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html
@@ -1,10 +1,10 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DELINQUENCY_RANGE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteDelinquencyRange()" *mifosxHasPermission="'DELETE_DELINQUENCY_RANGE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
diff --git a/src/app/products/manage-tax-components/manage-tax-components.component.html b/src/app/products/manage-tax-components/manage-tax-components.component.html
index 8080e2e6c9..bfadc2e29b 100644
--- a/src/app/products/manage-tax-components/manage-tax-components.component.html
+++ b/src/app/products/manage-tax-components/manage-tax-components.component.html
@@ -1,40 +1,40 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXCOMPONENT'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Tax Component
     </button>
   </div>
-  
+
   <div class="container">
-  
+
     <div fxLayout="row">
       <mat-form-field fxFlex>
         <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
         <input matInput (keyup)="applyFilter($event.target.value)">
       </mat-form-field>
     </div>
-  
+
     <div class="mat-elevation-z8">
-  
+
       <table mat-table [dataSource]="dataSource" matSort>
-  
+
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
           <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.name }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="percentage">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Percentage </th>
           <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.percentage }} </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-  
+
       </table>
-  
+
       <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-  
+
     </div>
 
   </div>
diff --git a/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html b/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html
index 1997f42645..af1b5fbc07 100644
--- a/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html
+++ b/src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXCOMPONENT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
index 52f0462863..2a72a3c729 100644
--- a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
@@ -20,7 +20,7 @@ <h3 fxFlex="40%" class="mat-h3">Tax Components</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
index 6de8c7b144..367bfe4178 100644
--- a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
@@ -20,7 +20,7 @@ <h3 fxFlex="40%" class="mat-h3">Tax Components</h3>
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>
diff --git a/src/app/products/manage-tax-groups/manage-tax-groups.component.html b/src/app/products/manage-tax-groups/manage-tax-groups.component.html
index a6ee3d578f..a850233d65 100644
--- a/src/app/products/manage-tax-groups/manage-tax-groups.component.html
+++ b/src/app/products/manage-tax-groups/manage-tax-groups.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXGROUP'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Tax Groups
   </button>
 </div>
diff --git a/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html b/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
index f44aa3b07c..24b31f03b6 100644
--- a/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXGROUP'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/products/products-mix/products-mix.component.html b/src/app/products/products-mix/products-mix.component.html
index 6f511665ab..8472d1b855 100644
--- a/src/app/products/products-mix/products-mix.component.html
+++ b/src/app/products/products-mix/products-mix.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PRODUCTMIX'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
   </button>
 </div>
 
diff --git a/src/app/products/products-mix/view-product-mix/view-product-mix.component.html b/src/app/products/products-mix/view-product-mix/view-product-mix.component.html
index 3e6a537b18..23f277e7cf 100644
--- a/src/app/products/products-mix/view-product-mix/view-product-mix.component.html
+++ b/src/app/products/products-mix/view-product-mix/view-product-mix.component.html
@@ -1,47 +1,47 @@
-<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
-  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
-    Delete
-  </button>
-</div>
-
-<div class="container">
-  
-    <div class="mat-elevation-z8 inline-table">
-  
-      <table mat-table [dataSource]="allowedProductsDatasource" matSort>
-        
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'"> Allowed Products </th>
-          <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'"> {{ product.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: allowedProductsDisplayedColumns;"></tr>
-      </table>
-
-      <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-  
-    </div>
-
-    <div class="mat-elevation-z8 inline-table">
-        
-      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
-        
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Restricted Products </th>
-          <td mat-cell *matCellDef="let product"> {{ product.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns;"></tr>
-      </table>
-  
-      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-    </div>
-  
-  </div>
+<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    Edit
+  </button>
+  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    Delete
+  </button>
+</div>
+
+<div class="container">
+
+    <div class="mat-elevation-z8 inline-table">
+
+      <table mat-table [dataSource]="allowedProductsDatasource" matSort>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'"> Allowed Products </th>
+          <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'"> {{ product.name }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: allowedProductsDisplayedColumns;"></tr>
+      </table>
+
+      <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+    </div>
+
+    <div class="mat-elevation-z8 inline-table">
+
+      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Restricted Products </th>
+          <td mat-cell *matCellDef="let product"> {{ product.name }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns;"></tr>
+      </table>
+
+      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+    </div>
+
+  </div>
diff --git a/src/app/products/products-routing.module.ts b/src/app/products/products-routing.module.ts
index 70f60d28dd..d3dc12877a 100644
--- a/src/app/products/products-routing.module.ts
+++ b/src/app/products/products-routing.module.ts
@@ -217,7 +217,6 @@ const routes: Routes = [
             },
             {
               path: ':productId',
-              component: ViewSavingProductComponent,
               data: { title: extract('View Saving Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               resolve: {
                 savingProductDatatables: SavingProductDatatablesResolver
@@ -225,27 +224,34 @@ const routes: Routes = [
               children: [
                 {
                   path: '',
-                  redirectTo: 'general',
-                  pathMatch: 'full'
-                },
-                {
-                  path: 'general',
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
-                  component: SavingProductGeneralTabComponent,
-                  resolve: {
-                    savingProduct: SavingProductResolver
-                  },
-                },
-                {
-                  path: 'datatables',
-                  children: [{
-                    path: ':datatableName',
-                    component: SavingProductDatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-                    resolve: {
-                      savingProductDatatable: SavingProductDatatableResolver
+                  component: ViewSavingProductComponent,
+
+                  children: [
+                    {
+                      path: '',
+                      redirectTo: 'general',
+                      pathMatch: 'full'
+                    },
+                    {
+                      path: 'general',
+                      data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                      component: SavingProductGeneralTabComponent,
+                      resolve: {
+                        savingProduct: SavingProductResolver
+                      },
+                    },
+                    {
+                      path: 'datatables',
+                      children: [{
+                        path: ':datatableName',
+                        component: SavingProductDatatableTabComponent,
+                        data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                        resolve: {
+                          savingProductDatatable: SavingProductDatatableResolver
+                        }
+                      }]
                     }
-                  }]
+                  ]
                 },
                 {
                   path: 'edit',
@@ -256,7 +262,7 @@ const routes: Routes = [
                   }
                 }
               ]
-            }
+            },
           ]
         },
         {
@@ -302,7 +308,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'dividends',
-                  data: { title: extract('Share Products Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false},
+                  data: { title: extract('Share Products Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false },
                   children: [
                     {
                       path: '',
@@ -335,7 +341,7 @@ const routes: Routes = [
         },
         {
           path: 'tax-configurations',
-          data: { title:  extract('Manage Tax Configurations'), breadcrumb: 'Manage Tax Configurations' },
+          data: { title: extract('Manage Tax Configurations'), breadcrumb: 'Manage Tax Configurations' },
           children: [
             {
               path: '',
@@ -343,7 +349,7 @@ const routes: Routes = [
             },
             {
               path: 'tax-components',
-              data: { title: extract('Manage Tax Components'), breadcrumb: 'Tax Components'},
+              data: { title: extract('Manage Tax Components'), breadcrumb: 'Tax Components' },
               children: [
                 {
                   path: '',
@@ -376,7 +382,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'edit',
-                      data: { title: extract('Edit Tax Component'), breadcrumb: 'Edit', routeParamBreadcrumb: false  },
+                      data: { title: extract('Edit Tax Component'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
                       component: EditTaxComponentComponent,
                       resolve: {
                         taxComponent: TaxComponentResolver
@@ -388,13 +394,13 @@ const routes: Routes = [
             },
             {
               path: 'tax-groups',
-              data: { title: extract('Manage Tax Groups'), breadcrumb: 'Tax Groups'},
+              data: { title: extract('Manage Tax Groups'), breadcrumb: 'Tax Groups' },
               children: [
                 {
                   path: '',
                   component: ManageTaxGroupsComponent,
                   resolve: {
-                  taxGroups: ManageTaxGroupsResolver
+                    taxGroups: ManageTaxGroupsResolver
                   }
                 },
                 {
@@ -435,7 +441,7 @@ const routes: Routes = [
         },
         {
           path: 'delinquency-bucket-configurations',
-          data: { title:  extract('Manage Delinquency Bucket Configurations'), breadcrumb: 'Manage Delinquency Bucket Configurations' },
+          data: { title: extract('Manage Delinquency Bucket Configurations'), breadcrumb: 'Manage Delinquency Bucket Configurations' },
           children: [
             {
               path: '',
@@ -443,7 +449,7 @@ const routes: Routes = [
             },
             {
               path: 'ranges',
-              data: { title: extract('Manage Delinquency Ranges'), breadcrumb: 'Delinquency Ranges'},
+              data: { title: extract('Manage Delinquency Ranges'), breadcrumb: 'Delinquency Ranges' },
               children: [
                 {
                   path: '',
@@ -485,7 +491,7 @@ const routes: Routes = [
             },
             {
               path: 'buckets',
-              data: { title: extract('Manage Delinquency Bucket'), breadcrumb: 'Delinquency Buckets'},
+              data: { title: extract('Manage Delinquency Bucket'), breadcrumb: 'Delinquency Buckets' },
               children: [
                 {
                   path: '',
@@ -533,7 +539,7 @@ const routes: Routes = [
         },
         {
           path: 'recurring-deposit-products',
-          data: { title:  extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' },
+          data: { title: extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' },
           children: [
             {
               path: 'create',
@@ -579,7 +585,7 @@ const routes: Routes = [
         },
         {
           path: 'fixed-deposit-products',
-          data: { title:  extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' },
+          data: { title: extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' },
           children: [
             {
               path: 'create',
@@ -625,7 +631,7 @@ const routes: Routes = [
         },
         {
           path: 'products-mix',
-          data: { title:  extract('Products Mix'), breadcrumb: 'Products Mix' },
+          data: { title: extract('Products Mix'), breadcrumb: 'Products Mix' },
           children: [
             {
               path: 'create',
@@ -644,7 +650,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Product Mix'), routeParamBreadcrumb: 'id'},
+              data: { title: extract('View Product Mix'), routeParamBreadcrumb: 'id' },
               resolve: {
                 productMix: ViewProductMixResolver
               },
@@ -803,7 +809,8 @@ const routes: Routes = [
         }
       ]
     }
-  ])
+  ]
+  )
 ];
 
 /**
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html
index 8a95c5223a..b29f6a549a 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html
@@ -114,7 +114,7 @@ <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary"
             (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -159,7 +159,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary"
             (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -203,7 +203,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary"
             (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -252,7 +252,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!recurringDepositProductFormValid">
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html
index 81c67b32ff..b7df35dcc6 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html
@@ -12,7 +12,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -66,7 +66,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html
index 7f87aec8da..ce060326aa 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html
@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html
index e912fad469..2cd2ba81bd 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html
@@ -30,7 +30,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
index 523cc79880..69e4dc8cb7 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html
@@ -6,7 +6,7 @@ <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
 
     <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
         Add
       </button>
     </div>
@@ -55,7 +55,7 @@ <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
             Is primary grouping by amount?
           </mat-checkbox>
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Slab
           </button>
         </div>
@@ -101,11 +101,11 @@ <h3 fxFlex="13%" class="mat-h3">Interest Rate Charts</h3>
               </button>
               <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                  <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye" class="m-r-10"></fa-icon>
                   View Incentives
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                  <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                   Hide Incentives
                 </span>
               </button>
@@ -125,7 +125,7 @@ <h4 class="mat-h4" fxFlex="13%">
 
                   <div fxFlex="83%">
                     <button mat-raised-button color="primary" (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
-                      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="plus" class="m-r-10"></fa-icon>
                       Add
                     </button>
                   </div>
@@ -213,7 +213,7 @@ <h4 class="mat-h4" fxFlex="13%">
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html
index e260850837..ddb5f194e5 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html
@@ -184,11 +184,11 @@ <h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
             <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex" [disabled]="chartSlab.incentives.length === 0">
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye" class="m-r-10"></fa-icon>
                 View Incentives
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                 Hide Incentives
               </span>
             </button>
@@ -454,7 +454,7 @@ <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html
index 25dddc5485..30ccd71a23 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html
@@ -130,7 +130,7 @@ <h4 fxFlex="23%" class="mat-h4">For Pre-mature closure</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html
index 98804bf568..440c6e0a25 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html
@@ -76,7 +76,7 @@ <h4 fxFlex="98%" class="mat-h4">Deposit Amount</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
index cf7d51f4cc..6065457b63 100644
--- a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
+++ b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateRecurringProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'>
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Recurring Deposit Product
   </button>
 </div>
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
index d4680dfa8d..8b15a183c9 100644
--- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
+++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
@@ -216,11 +216,11 @@ <h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
                   <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-                      <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye" class="m-r-10"></fa-icon>
                       View Incentives
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-                      <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                       Hide Incentives
                     </span>
                   </button>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
index 94ca1f9575..9482badda3 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html
@@ -158,7 +158,7 @@ <h4 fxFlex="33%" class="mat-h4">Configure Fund Sources for Payment Channels</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -200,7 +200,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Fees to Specific Income Accounts</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -242,7 +242,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -289,7 +289,7 @@ <h4 fxFlex="33%" class="mat-h4">Map Penalties to Specific Income Accounts</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!savingProductFormValid">
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html
index 4a0d5881e5..8cb737e9f3 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html
@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -64,7 +64,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
index c94f34255b..ea7cb83dcd 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html
@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
index 5841f693f1..e7a3624ec2 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html
@@ -27,7 +27,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
index 1659e48d7c..d928d6b7f8 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html
@@ -335,7 +335,7 @@ <h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
index e79ba7e218..6296b550f6 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html
@@ -6,7 +6,7 @@
       <mat-label>Minimum Opening Balance</mat-label>
       <input type="number" matInput formControlName="minRequiredOpeningBalance">
     </mat-form-field>
-    
+
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
@@ -123,7 +123,7 @@ <h3 fxFlex="23%" class="mat-h3">Dormancy Tracking</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
index a7127951cb..74cc4790c7 100644
--- a/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
+++ b/src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html
@@ -64,7 +64,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/saving-products/saving-products.component.html b/src/app/products/saving-products/saving-products.component.html
index 34e3129e98..9822db37c3 100644
--- a/src/app/products/saving-products/saving-products.component.html
+++ b/src/app/products/saving-products/saving-products.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonSavingProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SAVINGSPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Saving Product
   </button>
   </div>
diff --git a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
index 7c1afc2b06..2657e85a45 100644
--- a/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
+++ b/src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html
@@ -1,6 +1,6 @@
 
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
+  <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
   </button>
 </div>
diff --git a/src/app/products/share-products/dividends-share-product/dividends.component.html b/src/app/products/share-products/dividends-share-product/dividends.component.html
index 3fc9ce9ff6..5c56fd6af8 100644
--- a/src/app/products/share-products/dividends-share-product/dividends.component.html
+++ b/src/app/products/share-products/dividends-share-product/dividends.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREDIVIDEND'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Initiate Dividend
     </button>
 </div>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html
index 9828f4aedc..06e7a988d6 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html
@@ -80,7 +80,7 @@ <h4 fxFlex="98%" class="mat-h4">Income</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!shareProductFormValid">
diff --git a/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html
index 4a0d5881e5..8cb737e9f3 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html
@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -64,7 +64,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html
index ddaebd8a82..3bb7c481a7 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html
@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html
index bafcf3059f..909acd990c 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html
@@ -27,7 +27,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html
index 11c4f7c69b..3048d8697f 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html
@@ -4,7 +4,7 @@ <h4 fxFlex="23%" class="mat-h4">Market Price Periods</h4>
 
   <div fxFlex="73%">
     <button type="button" mat-raised-button color="primary" (click)="addMarketPricePeriod()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -46,7 +46,7 @@ <h4 fxFlex="23%" class="mat-h4">Market Price Periods</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html
index 47d0b4f7c9..d77ee6892e 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html
@@ -202,7 +202,7 @@ <h4 fxFlexFill class="mat-h4">Income</h4>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html
index 683d3d5a99..05264112ea 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html
@@ -62,7 +62,7 @@ <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html b/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html
index be7c17463c..29e3905422 100644
--- a/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html
+++ b/src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html
@@ -38,7 +38,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/products/share-products/share-products.component.html b/src/app/products/share-products/share-products.component.html
index 0bcae7fe54..204a5eb647 100644
--- a/src/app/products/share-products/share-products.component.html
+++ b/src/app/products/share-products/share-products.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateShareProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Share Product
   </button>
 </div>
diff --git a/src/app/products/share-products/view-dividend/view-dividend.component.html b/src/app/products/share-products/view-dividend/view-dividend.component.html
index 93e9a77eaf..8b1a13fe11 100644
--- a/src/app/products/share-products/view-dividend/view-dividend.component.html
+++ b/src/app/products/share-products/view-dividend/view-dividend.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" *ngIf="!isdividendPosted">
   <button mat-raised-button color="primary" *mifosxHasPermission='"POST_DIVIDENDS"' (click)="postDividends()">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Post Dividend
   </button>
 </div>
diff --git a/src/app/products/share-products/view-share-product/view-share-product.component.html b/src/app/products/share-products/view-share-product/view-share-product.component.html
index effd407656..93affa5350 100644
--- a/src/app/products/share-products/view-share-product/view-share-product.component.html
+++ b/src/app/products/share-products/view-share-product/view-share-product.component.html
@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="primary" [routerLink]="['dividends']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
-    <fa-icon icon="hand-holding-usd"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="hand-holding-usd" class="m-r-10"></fa-icon>
     Dividends
   </button>
 </div>
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 41c7ad2201..5549177556 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -1,10 +1,10 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['/system', 'roles-and-permissions']">
-    <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="check" class="m-r-10"></fa-icon>
     Permissions
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
-    <fa-icon icon="cog"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="cog" class="m-r-10"></fa-icon>
     Change Password
   </button>
 </div>
diff --git a/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html b/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html
index 35a1b00f14..4663f6da61 100644
--- a/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html
@@ -12,7 +12,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -110,31 +110,31 @@
               <mat-checkbox (change)="toggleSelect()" [(ngModel)]="element.selected"></mat-checkbox>
           </td>
       </ng-container>
-  
+
       <!-- Position Column -->
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef> Client ID </th>
         <td mat-cell *matCellDef="let element"> {{element.id}} </td>
       </ng-container>
-  
+
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Client Name </th>
         <td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
       </ng-container>
-  
-  
+
+
       <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
     </table>
   </div>
-  
+
 
 </div>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html
index 65be171e62..1df8df860a 100644
--- a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html
@@ -43,7 +43,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
index 26190cd7d0..228bebf927 100644
--- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html
@@ -151,20 +151,20 @@ <h3 class="mat-h3" fxFlexFill>Charges</h3>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
             {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
           </span>
-          <span 
+          <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
             N/A
           </span>
         </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="repaymentsEvery">
         <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.feeInterval || 'Not Provided' }} 
+          {{ charge.feeInterval || 'Not Provided' }}
         </td>
-      </ng-container>  
+      </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
         <th mat-header-cell *matHeaderCellDef> Collected On </th>
@@ -184,7 +184,7 @@ <h3 class="mat-h3" fxFlexFill>Charges</h3>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html b/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html
index 04a950ffdf..52803b6667 100644
--- a/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html
+++ b/src/app/savings/savings-account-stepper/savings-account-terms-step/savings-account-terms-step.component.html
@@ -145,7 +145,7 @@ <h3 fxFlex="23%" class="mat-h3">Overdraft</h3>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html b/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
index 343fc176d0..19ff665e77 100644
--- a/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
+++ b/src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
@@ -27,7 +27,7 @@
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
     <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs"></fa-icon>&nbsp;&nbsp;Generate Report &nbsp;</button>
+    <fa-icon icon="cogs" class="m-r-10"></fa-icon>Generate Report &nbsp;</button>
   </div>
 
 </form>
diff --git a/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html b/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html
index 24b0c9e8a4..d6536ffadd 100644
--- a/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html
+++ b/src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html
@@ -2,9 +2,9 @@
 
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
   </div>
-  
+
   <iframe [src]="pentahoUrl" frameborder="0" width=100% height="600px;"></iframe>
 
 </mat-card>
diff --git a/src/app/savings/savings-account-view/view-charge/view-charge.component.html b/src/app/savings/savings-account-view/view-charge/view-charge.component.html
index 54c37610a6..6406034311 100644
--- a/src/app/savings/savings-account-view/view-charge/view-charge.component.html
+++ b/src/app/savings/savings-account-view/view-charge/view-charge.component.html
@@ -3,16 +3,16 @@
 <div *ngIf="savingsAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
   fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="accent" *mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="payCharge()">
-      <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
       Pay
     </button>
     <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="waiveCharge()">
-      <fa-icon icon="flag"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="flag" class="m-r-10"></fa-icon>
       Waive
     </button>
     <span *ngIf="isRecurringCharge()">
       <button mat-raised-button color="warn" *mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'" (click)="inactivateCharge()">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>
         Inactivate
       </button>
     </span>
@@ -21,11 +21,11 @@
 <div *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'"
   fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
       Edit
     </button>
     <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="deleteCharge()">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
       Delete
     </button>
 </div>
@@ -45,7 +45,7 @@
         <div fxFlex="50%">
           {{ chargeData.name }}
         </div>
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Charge Type
         </div>
@@ -85,7 +85,7 @@
         <div fxFlex="50%">
           {{ chargeData.chargeCalculationType.value }}
         </div>
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Due
         </div>
diff --git a/src/app/savings/savings-routing.module.ts b/src/app/savings/savings-routing.module.ts
index 706eec7ae0..b8371ed654 100644
--- a/src/app/savings/savings-routing.module.ts
+++ b/src/app/savings/savings-routing.module.ts
@@ -41,6 +41,7 @@ import { SavingsDocumentsTabComponent } from './savings-account-view/savings-doc
 import { NotesTabComponent } from './savings-account-view/notes-tab/notes-tab.component';
 import { SavingNotesResolver } from './common-resolvers/saving-notes.resolver';
 import { SavingDocumentsResolver } from './common-resolvers/saving-documents.resolver';
+
 /** Savings Routes */
 const routes: Routes = [
   {
@@ -58,9 +59,6 @@ const routes: Routes = [
       {
         path: ':savingAccountId',
         data: { title: extract('Saving Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        resolve: {
-          savingsAccountData: SavingsAccountViewResolver
-        },
         children: [
           {
             path: '',
@@ -70,6 +68,11 @@ const routes: Routes = [
               savingsDatatables: SavingsDatatablesResolver
             },
             children: [
+              {
+                path: '',
+                redirectTo: 'transactions',
+                pathMatch: 'full'
+              },
               {
                 path: 'transactions',
                 data: { title: extract('Savings Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
@@ -77,7 +80,6 @@ const routes: Routes = [
                   {
                     path: '',
                     component: TransactionsTabComponent
-
                   },
                   {
                     path: 'export',
diff --git a/src/app/self-service/users/create-user/create-user.component.html b/src/app/self-service/users/create-user/create-user.component.html
index 0d93e861f3..cc2491aecb 100644
--- a/src/app/self-service/users/create-user/create-user.component.html
+++ b/src/app/self-service/users/create-user/create-user.component.html
@@ -52,7 +52,7 @@
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
           <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
           <button mat-raised-button color="accent">
-            <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
             Activate Self Service User
           </button>
         </mat-card-actions>
diff --git a/src/app/self-service/users/users.component.html b/src/app/self-service/users/users.component.html
index b8e033cb17..c128dc734e 100644
--- a/src/app/self-service/users/users.component.html
+++ b/src/app/self-service/users/users.component.html
@@ -1,15 +1,15 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to selection in table. -->
   <button mat-raised-button color="accent">
-    <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
     Activate
   </button>
   <button mat-raised-button color="warn">
-    <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="lock" class="m-r-10"></fa-icon>
     Deactivate
   </button>
   <button mat-raised-button color="primary" [routerLink]="['create']">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create User
   </button>
 </div>
diff --git a/src/app/self-service/users/view-user/view-user.component.html b/src/app/self-service/users/view-user/view-user.component.html
index b1856848ed..43d5797b20 100644
--- a/src/app/self-service/users/view-user/view-user.component.html
+++ b/src/app/self-service/users/view-user/view-user.component.html
@@ -1,19 +1,19 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to status of user. -->
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
-    <fa-icon icon="cog"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="cog" class="m-r-10"></fa-icon>
     Change Password
   </button>
   <button mat-raised-button color="accent">
-    <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
     Activate
   </button>
   <button mat-raised-button color="warn">
-    <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="lock" class="m-r-10"></fa-icon>
     Deactivate
   </button>
 </div>
diff --git a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
index 4825eaf983..2f86d67f0f 100644
--- a/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
+++ b/src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html
@@ -7,12 +7,12 @@ <h3>{{datatableName}}</h3>
     <div class="action-button m-b-5" fxLayoutGap="10px">
       <span *mifosxHasPermission="'CREATE_' + datatableName">
         <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
         </button>
       </span>
       <span *mifosxHasPermission="'DELETE_' + datatableName">
         <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="showDeleteBotton">
-          <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete All
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
         </button>
       </span>
     </div>
diff --git a/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html b/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
index e3689a1636..e186b27849 100644
--- a/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html
@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateSharesAccountForm.valid">Confirm</button>
+        <button mat-raised-button  [disabled]="!activateSharesAccountForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
index ef3438418d..42658aa549 100644
--- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
+++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html
@@ -37,7 +37,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!applySharesForm.valid">Confirm</button>
+        <button mat-raised-button  [disabled]="!applySharesForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html b/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
index a07beac8d5..4886314918 100644
--- a/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html
@@ -29,7 +29,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!approveSharesAccountForm.valid">Confirm</button>
+        <button mat-raised-button  [disabled]="!approveSharesAccountForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>
diff --git a/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html b/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
index 6fac16b9ed..5a074beeda 100644
--- a/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
+++ b/src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html
@@ -4,5 +4,5 @@ <h1 mat-dialog-title>Approve Share</h1>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="accent" [mat-dialog-close]="{ approve: true }">Confirm</button>
+  <button mat-raised-button  [mat-dialog-close]="{ approve: true }">Confirm</button>
 </mat-dialog-actions>
diff --git a/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html b/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
index 0a048842b2..b2fd82acff 100644
--- a/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html
@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -35,7 +35,7 @@
     <ng-container matColumnDef="amount">
       <th mat-header-cell *matHeaderCellDef> Amount </th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.amount || charge.amountOrPercentage }} 
+        {{ charge.amount || charge.amountOrPercentage }}
         <button mat-icon-button color="primary" (click)="editCharge(charge)">
           <fa-icon icon="pen"></fa-icon>
         </button>
@@ -67,7 +67,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>
diff --git a/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html b/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
index c25adb1257..2854dd0a4a 100644
--- a/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html
@@ -16,7 +16,7 @@
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
       <mat-label>Submitted On</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" 
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
index 2664502e40..93aff21445 100644
--- a/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html
@@ -120,7 +120,7 @@ <h3 class="mat-h3" fxFlexFill>Charges</h3>
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">
diff --git a/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html b/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
index 959f45460d..e658c48a82 100644
--- a/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
+++ b/src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html
@@ -44,7 +44,7 @@
 
     <mat-form-field fxFlex="48%" (click)="applicationDatePicker.open()">
       <mat-label>Application Date</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="applicationDatePicker" 
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="applicationDatePicker"
         formControlName="applicationDate" required>
       <mat-datepicker-toggle matSuffix [for]="applicationDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #applicationDatePicker></mat-datepicker>
@@ -93,7 +93,7 @@ <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
diff --git a/src/app/system/account-number-preferences/account-number-preferences.component.html b/src/app/system/account-number-preferences/account-number-preferences.component.html
index 52525b49e5..ec42a7fed1 100644
--- a/src/app/system/account-number-preferences/account-number-preferences.component.html
+++ b/src/app/system/account-number-preferences/account-number-preferences.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'ADD_PREFERENCES'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Preference
   </button>
 </div>
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
index 9b7bb744c4..d7932331eb 100644
--- a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
+++ b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
@@ -1,12 +1,12 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTNUMBERFORMAT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_ACCOUNTNUMBERFORMAT'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 
diff --git a/src/app/system/audit-trails/audit-trails.component.html b/src/app/system/audit-trails/audit-trails.component.html
index fcff34f686..a737a12e90 100644
--- a/src/app/system/audit-trails/audit-trails.component.html
+++ b/src/app/system/audit-trails/audit-trails.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="downloadCSV()">
-    <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="file" class="m-r-10"></fa-icon>
     Download CSV
   </button>
 </div>
diff --git a/src/app/system/codes/codes.component.html b/src/app/system/codes/codes.component.html
index 31a2b463da..aa3025ac06 100644
--- a/src/app/system/codes/codes.component.html
+++ b/src/app/system/codes/codes.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateCode>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Code
     </button>
   </div>
diff --git a/src/app/system/codes/view-code/view-code.component.html b/src/app/system/codes/view-code/view-code.component.html
index d23adb1fbf..4ac8273da3 100644
--- a/src/app/system/codes/view-code/view-code.component.html
+++ b/src/app/system/codes/view-code/view-code.component.html
@@ -1,20 +1,20 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" fxLayout.xs="column">
 
   <button mat-raised-button color="primary" (click)="addCodeValueRow()" *mifosxHasPermission="'CREATE_CODEVALUE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Add Code Value
   </button>
 
   <span *ngIf="!codeData.systemDefined">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit Code
   </button>
   </span>
 
   <span *ngIf="!codeData.systemDefined">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
       Delete Code
     </button>
   </span>
diff --git a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html
index 491f6bdb49..174fad7b97 100644
--- a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html
+++ b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html
@@ -2,7 +2,7 @@
 
   <div #buttonEdit class="in-block">
     <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>
       Edit
     </button>
   </div>
diff --git a/src/app/system/external-services/amazon-s3/amazon-s3.component.html b/src/app/system/external-services/amazon-s3/amazon-s3.component.html
index 233c54deb9..f39d38c6b4 100644
--- a/src/app/system/external-services/amazon-s3/amazon-s3.component.html
+++ b/src/app/system/external-services/amazon-s3/amazon-s3.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/system/external-services/email/email.component.html b/src/app/system/external-services/email/email.component.html
index f786b459de..8bc6021c03 100644
--- a/src/app/system/external-services/email/email.component.html
+++ b/src/app/system/external-services/email/email.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/system/external-services/notification/notification.component.html b/src/app/system/external-services/notification/notification.component.html
index f786b459de..8bc6021c03 100644
--- a/src/app/system/external-services/notification/notification.component.html
+++ b/src/app/system/external-services/notification/notification.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/system/external-services/sms/sms.component.html b/src/app/system/external-services/sms/sms.component.html
index f786b459de..8bc6021c03 100644
--- a/src/app/system/external-services/sms/sms.component.html
+++ b/src/app/system/external-services/sms/sms.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
index b890603b7a..e3b5e2a04e 100644
--- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
+++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
@@ -49,7 +49,7 @@
           <p fxFlex="20%" class="mat-title">Columns</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addColumn()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Column
           </button>
 
diff --git a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
index 064ebac9a8..e5b72e2bfd 100644
--- a/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
+++ b/src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
@@ -42,7 +42,7 @@
           <p fxFlex="20%" class="mat-title">Columns</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addColumn()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Column
           </button>
 
diff --git a/src/app/system/manage-data-tables/manage-data-tables.component.html b/src/app/system/manage-data-tables/manage-data-tables.component.html
index 49208a6339..153a8083f9 100644
--- a/src/app/system/manage-data-tables/manage-data-tables.component.html
+++ b/src/app/system/manage-data-tables/manage-data-tables.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #createDatatableRef class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DATATABLE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Data Table
     </button>
   </div>
diff --git a/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html b/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html
index 26b15e7664..569fab7ee8 100644
--- a/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html
+++ b/src/app/system/manage-data-tables/view-data-table/view-data-table.component.html
@@ -1,12 +1,12 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DATATABLE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_DATATABLE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 
diff --git a/src/app/system/manage-hooks/create-hook/create-hook.component.html b/src/app/system/manage-hooks/create-hook/create-hook.component.html
index 3571b7d423..01bbab39a5 100644
--- a/src/app/system/manage-hooks/create-hook/create-hook.component.html
+++ b/src/app/system/manage-hooks/create-hook/create-hook.component.html
@@ -112,7 +112,7 @@
           <p fxFlex="20%" class="mat-title">Events</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Event
           </button>
 
diff --git a/src/app/system/manage-hooks/edit-hook/edit-hook.component.html b/src/app/system/manage-hooks/edit-hook/edit-hook.component.html
index d72eab75ee..4ef8aab10f 100644
--- a/src/app/system/manage-hooks/edit-hook/edit-hook.component.html
+++ b/src/app/system/manage-hooks/edit-hook/edit-hook.component.html
@@ -112,7 +112,7 @@
           <p fxFlex="20%" class="mat-title">Events</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addEvent()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Event
           </button>
 
diff --git a/src/app/system/manage-hooks/manage-hooks.component.html b/src/app/system/manage-hooks/manage-hooks.component.html
index 7fc79b0508..6848ed075b 100644
--- a/src/app/system/manage-hooks/manage-hooks.component.html
+++ b/src/app/system/manage-hooks/manage-hooks.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOOK'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Hook
   </button>
 </div>
diff --git a/src/app/system/manage-hooks/view-hook/view-hook.component.html b/src/app/system/manage-hooks/view-hook/view-hook.component.html
index a389105475..de96551dcc 100644
--- a/src/app/system/manage-hooks/view-hook/view-hook.component.html
+++ b/src/app/system/manage-hooks/view-hook/view-hook.component.html
@@ -1,12 +1,12 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOOK'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_HOOK'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 
diff --git a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
index 3f9ad69cef..c24b447941 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html
@@ -3,11 +3,11 @@
     <h2 class="no-m">Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}</h2>
     </div>
     <button mat-raised-button class="suspend">
-      <fa-icon icon="times-circle"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
       Suspend
     </button>
     <button mat-raised-button class="activate" (click)="activateScheduler()" *ngIf="!schedulerActive">
-      <fa-icon icon="times-circle"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
       Activate
     </button>
 
@@ -24,7 +24,7 @@ <h2 class="no-m">Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}
 
   <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="runSelectedJobs()">
-      <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="play" class="m-r-10"></fa-icon>
       Run Selected Jobs
     </button>
   </div>
@@ -108,7 +108,7 @@ <h2 class="no-m">Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}
 
 <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
   <button mat-raised-button color="primary" (click)="runSelectedJobs()">
-    <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="play" class="m-r-10"></fa-icon>
     Run Selected Jobs<ng-template #templateSchedulerJobs let-data let-popover="popover">
   <h2>Template</h2>
   <p>This is the template I am trying to use. Is that fine.</p>
@@ -116,7 +116,7 @@ <h2>Template</h2>
 </ng-template>
   </button>
   <button mat-raised-button color="primary" (click)="refresh()">
-    <fa-icon icon="sync"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="sync" class="m-r-10"></fa-icon>
     Refresh
   </button>
 </div>
diff --git a/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html b/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html
index 773cd09a92..c1ea174fcc 100644
--- a/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html
+++ b/src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="primary" [routerLink]="['viewhistory']">
diff --git a/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html b/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html
index d1e23bacd8..cede43df8e 100644
--- a/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html
+++ b/src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html
@@ -11,7 +11,7 @@
 
   <div class="action-button" fxLayoutGap="25px" *ngIf="jobStepsData.length > 0">
     <button mat-raised-button color="primary" (click)="addJobStep()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Link Job Step
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Link Job Step
     </button>
   </div>
 
diff --git a/src/app/system/manage-reports/edit-report/edit-report.component.html b/src/app/system/manage-reports/edit-report/edit-report.component.html
index 8bd6702716..97bddbc8cb 100644
--- a/src/app/system/manage-reports/edit-report/edit-report.component.html
+++ b/src/app/system/manage-reports/edit-report/edit-report.component.html
@@ -85,7 +85,7 @@
 
           <button mat-raised-button fxFlex="20%" type="button" *ngIf="!reportData.coreReport" color="primary"
             (click)="addReportParameter()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Report Parameter
           </button>
 
diff --git a/src/app/system/manage-reports/manage-reports.component.html b/src/app/system/manage-reports/manage-reports.component.html
index 1c3d750689..aa3e6d9bb0 100644
--- a/src/app/system/manage-reports/manage-reports.component.html
+++ b/src/app/system/manage-reports/manage-reports.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateReport class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_REPORT'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
         Create Report
     </button>
   </div>
diff --git a/src/app/system/manage-reports/view-report/view-report.component.html b/src/app/system/manage-reports/view-report/view-report.component.html
index e914afad47..3c3bd584b5 100644
--- a/src/app/system/manage-reports/view-report/view-report.component.html
+++ b/src/app/system/manage-reports/view-report/view-report.component.html
@@ -1,13 +1,13 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_REPORT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 
   <span *ngIf="!reportData.coreReport">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_REPORT'">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
       Delete
     </button>
   </span>
diff --git a/src/app/system/manage-surveys/create-survey/create-survey.component.html b/src/app/system/manage-surveys/create-survey/create-survey.component.html
index c38cdc14a4..d9f9a688bb 100644
--- a/src/app/system/manage-surveys/create-survey/create-survey.component.html
+++ b/src/app/system/manage-surveys/create-survey/create-survey.component.html
@@ -66,7 +66,7 @@
               <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
                 <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
                 <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
-                  <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="trash" class="m-r-10"></fa-icon>
                   Delete Question
                 </button>
               </div>
@@ -97,7 +97,7 @@ <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
               <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mat-h4">Options</h4>
                 <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
-                  <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="plus" class="m-r-10"></fa-icon>
                   Add Option
                 </button>
               </div>
@@ -150,7 +150,7 @@ <h4 class="mat-h4">Options</h4>
             <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
               <button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
               <button type="button" mat-raised-button color="primary"(click)="addQuestion()">
-                <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="plus" class="m-r-10"></fa-icon>
                 Add Question
               </button>
               <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Submit</button>
diff --git a/src/app/system/manage-surveys/edit-survey/edit-survey.component.html b/src/app/system/manage-surveys/edit-survey/edit-survey.component.html
index 93546b8b07..7049e914a0 100644
--- a/src/app/system/manage-surveys/edit-survey/edit-survey.component.html
+++ b/src/app/system/manage-surveys/edit-survey/edit-survey.component.html
@@ -59,7 +59,7 @@
                 <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
                   <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
                   <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
-                    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                    <fa-icon icon="trash" class="m-r-10"></fa-icon>
                     Delete Question
                   </button>
                 </div>
@@ -90,7 +90,7 @@ <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
                 <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
                   <h4 class="mat-h4">Options</h4>
                   <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
-                    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                    <fa-icon icon="plus" class="m-r-10"></fa-icon>
                     Add Option
                   </button>
                 </div>
@@ -143,7 +143,7 @@ <h4 class="mat-h4">Options</h4>
               <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
                 <button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
                 <button type="button" mat-raised-button color="primary" (click)="addQuestion()">
-                  <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="plus" class="m-r-10"></fa-icon>
                   Add Question
                 </button>
                 <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Edit Survey</button>
diff --git a/src/app/system/manage-surveys/manage-surveys.component.html b/src/app/system/manage-surveys/manage-surveys.component.html
index c252308652..4796b12d02 100644
--- a/src/app/system/manage-surveys/manage-surveys.component.html
+++ b/src/app/system/manage-surveys/manage-surveys.component.html
@@ -1,10 +1,10 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Surveys
   </button>
 </div>
-  
+
 <div class="container">
 
   <div fxLayout="row">
@@ -13,26 +13,26 @@
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
-  
+
   <div class="mat-elevation-z8">
-    
+
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="key">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Key </th>
           <td mat-cell *matCellDef="let survey"> {{ survey.key }} </td>
       </ng-container>
-        
+
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.name }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.description }} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="countryCode">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Country Code </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.countryCode }} </td>
@@ -51,14 +51,14 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
         <td mat-cell *matCellDef="let survey">
           <button mat-button *ngIf="!isActive(survey.validFrom, survey.validTo)" color="accent">
-            <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;Activate
+            <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Activate
           </button>
           <button mat-button *ngIf="isActive(survey.validFrom, survey.validTo)" color="warn">
-            <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;Deactivate
+            <fa-icon icon="lock" class="m-r-10"></fa-icon>Deactivate
           </button>
-        </td> 
+        </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let survey; columns: displayedColumns;" [routerLink]="[survey.id]" class="select-row"></tr>
 
diff --git a/src/app/system/manage-surveys/view-survey/view-survey.component.html b/src/app/system/manage-surveys/view-survey/view-survey.component.html
index 961013e2a8..0d8a68152c 100644
--- a/src/app/system/manage-surveys/view-survey/view-survey.component.html
+++ b/src/app/system/manage-surveys/view-survey/view-survey.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'" (click)="onEdit()">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
diff --git a/src/app/system/roles-and-permissions/roles-and-permissions.component.html b/src/app/system/roles-and-permissions/roles-and-permissions.component.html
index 57d90e99bc..deee295186 100644
--- a/src/app/system/roles-and-permissions/roles-and-permissions.component.html
+++ b/src/app/system/roles-and-permissions/roles-and-permissions.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" [routerLink]="['add']">
   <div #buttonAddRole class="in-block">
     <button mat-raised-button color="primary">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add Role
     </button>
   </div>
diff --git a/src/app/system/roles-and-permissions/view-role/view-role.component.html b/src/app/system/roles-and-permissions/view-role/view-role.component.html
index bc997997b2..8880302df7 100644
--- a/src/app/system/roles-and-permissions/view-role/view-role.component.html
+++ b/src/app/system/roles-and-permissions/view-role/view-role.component.html
@@ -1,21 +1,21 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" (click)="editRoles(); backupCheckValues();" [disabled]="rolePermissionService.name === 'Super user'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit Role
   </button>
 
   <button *ngIf="!isRoleEnable(rolePermissionService.disabled)" mat-raised-button color="danger" (click)="disableRolesConfirmation()" [disabled]="rolePermissionService.name === 'Super user'">
-    <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="lock" class="m-r-10"></fa-icon>
     Disable Role
   </button>
 
   <button *ngIf="isRoleEnable(rolePermissionService.disabled)" mat-raised-button color="primary" (click)="enableRolesConfirmation()" [disabled]="rolePermissionService.name === 'Super user'">
-    <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
     Enable Role
   </button>
 
   <button mat-raised-button color="warn" (click)="deleteRole()" [disabled]="rolePermissionService.name === 'Super user'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete Role
   </button>
 
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html
index 84d195dd49..e98cab27e7 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html
@@ -9,7 +9,7 @@
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'ACTIVATE_CLIENT'"
         (click)="approveClients()">
-        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+        <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
       </button>
     </div>
   </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html
index a5ed3568cf..9bbaefcc9a 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html
@@ -8,7 +8,7 @@
     </div>
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="approveLoan()">
-        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+        <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
       </button>
     </div>
   </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html
index 761d082aca..f250d82ca0 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html
@@ -8,7 +8,7 @@
     </div>
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="disburseLoan()">
-        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Disburse
+        <fa-icon icon="check" class="m-r-10"></fa-icon>Disburse
       </button>
     </div>
   </div>
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.html b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.html
index f266e9db8c..7fd5fc7e80 100644
--- a/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.html
+++ b/src/app/tasks/checker-inbox-and-tasks-tabs/loan-locked/loan-locked.component.html
@@ -8,7 +8,7 @@
     </div>
     <div fxFlex="60%" *ngIf="allowRunInlineJob">
       <button mat-raised-button color="success" *mifosxHasPermission="'EXECUTE_INLINE_JOB'" (click)="runInlineCOB()">
-        <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;{{'Start inline COB' | translate}}
+        <fa-icon icon="play" class="m-r-10"></fa-icon>{{'Start inline COB' | translate}}
       </button>
     </div>
   </div>
diff --git a/src/app/templates/create-template/create-template.component.html b/src/app/templates/create-template/create-template.component.html
index 709b2641f9..2c6c55ad28 100644
--- a/src/app/templates/create-template/create-template.component.html
+++ b/src/app/templates/create-template/create-template.component.html
@@ -3,11 +3,11 @@
   <mat-card fxLayout="column" fxLayoutGap="2%">
 
     <form [formGroup]="templateForm">
-  
+
       <mat-card-content>
-  
+
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  
+
           <mat-form-field fxFlex="48%">
             <mat-label>Entity</mat-label>
             <mat-select required formControlName="entity">
@@ -18,8 +18,8 @@
             <mat-error *ngIf="templateForm.controls.entity.hasError('required')">
               Entity is <strong>required</strong>
             </mat-error>
-          </mat-form-field>		
-  
+          </mat-form-field>
+
           <mat-form-field fxFlex="48%">
             <mat-label>Type</mat-label>
             <mat-select required formControlName="type">
@@ -31,7 +31,7 @@
               Type is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex="48%">
             <mat-label>Name</mat-label>
             <input matInput required formControlName="name">
@@ -39,9 +39,9 @@
               Name is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-  
+
         </div>
-  
+
       </mat-card-content>
 
     </form>
@@ -67,10 +67,10 @@
         </mat-form-field>
 
         <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
         </button>
         <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
-          <fa-icon icon="minus"></fa-icon>&nbsp;&nbsp;Remove
+          <fa-icon icon="minus" class="m-r-10"></fa-icon>Remove
         </button>
 
       </div>
@@ -88,47 +88,47 @@
       <mat-accordion>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
-  
+
           <mat-expansion-panel-header>
             <mat-panel-title>
               Client Parameters
             </mat-panel-title>
           </mat-expansion-panel-header>
-          
+
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
             <button mat-stroked-button color="primary" class="parameter"
               *ngFor="let label of clientParameterLabels" (click)="addText(label)">
               {{ label }}
             </button>
           </div>
-  
+
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-  
+
           <mat-expansion-panel-header>
             <mat-panel-title>
               Loan Parameters
             </mat-panel-title>
           </mat-expansion-panel-header>
-          
+
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
             <button mat-stroked-button color="primary" class="parameter"
               *ngFor="let label of loanParameterLabels" (click)="addText(label)">
               {{ label }}
             </button>
           </div>
-  
+
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-  
+
           <mat-expansion-panel-header>
             <mat-panel-title>
               Repayment Schedule Parameters
             </mat-panel-title>
           </mat-expansion-panel-header>
-          
+
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
             <button mat-stroked-button color="primary" class="parameter"
               *ngFor="let label of repaymentParameterLabels" (click)="addText(label)">
@@ -137,7 +137,7 @@
           </div>
 
         </mat-expansion-panel>
-  
+
       </mat-accordion>
 
     </div>
@@ -146,7 +146,7 @@
       <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()">Submit</button>
     </mat-card-actions>
-  
+
   </mat-card>
 
 </div>
diff --git a/src/app/templates/edit-template/edit-template.component.html b/src/app/templates/edit-template/edit-template.component.html
index ab1f93838b..3d9b8b1fc9 100644
--- a/src/app/templates/edit-template/edit-template.component.html
+++ b/src/app/templates/edit-template/edit-template.component.html
@@ -3,11 +3,11 @@
   <mat-card fxLayout="column" fxLayoutGap="2%">
 
     <form [formGroup]="templateForm">
-  
+
       <mat-card-content>
-  
+
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  
+
           <mat-form-field fxFlex="48%">
             <mat-label>Entity</mat-label>
             <mat-select formControlName="entity">
@@ -15,8 +15,8 @@
                 {{ entity.name }}
               </mat-option>
             </mat-select>
-          </mat-form-field>		
-  
+          </mat-form-field>
+
           <mat-form-field fxFlex="48%">
             <mat-label>Type</mat-label>
             <mat-select formControlName="type">
@@ -25,14 +25,14 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-  
+
           <mat-form-field fxFlex="48%">
             <mat-label>Name</mat-label>
             <input matInput formControlName="name">
           </mat-form-field>
-  
+
         </div>
-  
+
       </mat-card-content>
 
     </form>
@@ -58,10 +58,10 @@
         </mat-form-field>
 
         <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
         </button>
         <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
-          <fa-icon icon="minus"></fa-icon>&nbsp;&nbsp;Remove
+          <fa-icon icon="minus" class="m-r-10"></fa-icon>Remove
         </button>
 
       </div>
@@ -79,47 +79,47 @@
       <mat-accordion>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
-  
+
           <mat-expansion-panel-header>
             <mat-panel-title>
               Client Parameters
             </mat-panel-title>
           </mat-expansion-panel-header>
-          
+
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
             <button mat-stroked-button color="primary" class="parameter"
               *ngFor="let label of clientParameterLabels" (click)="addText(label)">
               {{ label }}
             </button>
           </div>
-  
+
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-  
+
           <mat-expansion-panel-header>
             <mat-panel-title>
               Loan Parameters
             </mat-panel-title>
           </mat-expansion-panel-header>
-          
+
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
             <button mat-stroked-button color="primary" class="parameter"
               *ngFor="let label of loanParameterLabels" (click)="addText(label)">
               {{ label }}
             </button>
           </div>
-  
+
         </mat-expansion-panel>
 
         <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-  
+
           <mat-expansion-panel-header>
             <mat-panel-title>
               Repayment Schedule Parameters
             </mat-panel-title>
           </mat-expansion-panel-header>
-          
+
           <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
             <button mat-stroked-button color="primary" class="parameter"
               *ngFor="let label of repaymentParameterLabels" (click)="addText(label)">
@@ -128,7 +128,7 @@
           </div>
 
         </mat-expansion-panel>
-  
+
       </mat-accordion>
 
     </div>
@@ -137,7 +137,7 @@
       <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()">Submit</button>
     </mat-card-actions>
-  
+
   </mat-card>
 
 </div>
diff --git a/src/app/templates/templates.component.html b/src/app/templates/templates.component.html
index f39b3fcf03..ec7f14eb1c 100644
--- a/src/app/templates/templates.component.html
+++ b/src/app/templates/templates.component.html
@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TEMPLATE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Template
   </button>
 </div>
diff --git a/src/app/templates/view-template/view-template.component.html b/src/app/templates/view-template/view-template.component.html
index 967f94b329..3f6d623562 100644
--- a/src/app/templates/view-template/view-template.component.html
+++ b/src/app/templates/view-template/view-template.component.html
@@ -1,12 +1,12 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TEMPLATE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_TEMPLATE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index b846381bba..151de46026 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateUser class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Create User' | translate }}
     </button>
   </div>
diff --git a/src/app/users/view-user/view-user.component.html b/src/app/users/view-user/view-user.component.html
index c542201521..0be1e944d2 100644
--- a/src/app/users/view-user/view-user.component.html
+++ b/src/app/users/view-user/view-user.component.html
@@ -1,14 +1,14 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="delete()">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
-    <fa-icon icon="cog"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="cog" class="m-r-10"></fa-icon>
     Change Password
   </button>
 </div>