diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 41032b2337..18d87f566d 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -182,11 +182,17 @@ function loadUserList(context, apiClient, users) {
 }
 
 function togglePassword() {
-    const input = document.getElementById('txtManualPassword');
+    const input = document.querySelector('.inputContainer #txtManualPassword');
+    const icon = document.querySelector('.inputContainer .passwordToggle .material-icons');
+
     if (input.type === 'password') {
         input.type = 'text';
+        icon.classList.remove('visibility');
+        icon.classList.add('visibility_off');
     } else {
         input.type = 'password';
+        icon.classList.remove('visibility_off');
+        icon.classList.add('visibility');
     }
 }
 
diff --git a/src/controllers/wizard/user/index.js b/src/controllers/wizard/user/index.js
index 0d3bc2e1db..9b6b20d68a 100644
--- a/src/controllers/wizard/user/index.js
+++ b/src/controllers/wizard/user/index.js
@@ -76,8 +76,15 @@ function togglePassword() {
     const inputIds = ['txtManualPassword', 'txtPasswordConfirm'];
     inputIds.forEach(id => {
         const input = document.getElementById(id);
-        if (input) {
-            input.type = (input.type === 'password') ? 'text' : 'password';
+        input.type = (input.type === 'password') ? 'text' : 'password';
+    });
+    document.querySelectorAll('.passwordToggle .material-icons').forEach(icon => {
+        if (icon.classList.contains('visibility')) {
+            icon.classList.remove('visibility');
+            icon.classList.add('visibility_off');
+        } else {
+            icon.classList.remove('visibility_off');
+            icon.classList.add('visibility');
         }
     });
 }