Esto es parte de mi código.
<div class="col-md-6"> @Html.Label("Respuestas * (Máximo 50 caracteres)", new { @class = "control-label" }) @Html.PasswordFor(m => m.PasswordAnswer, new { @class = "form-control", maxlength = 50, type = "text" }) <i class="fa fa-eye-slash" id="togglePassword"></i> </div>Su entrada de contraseña deberá tener el tipo de password para ocultarla.
Su botón alternaría entre el tipo de password y el tipo de text , usando javascript.
function togglePasswordVisibility() { let e = document.getElementById("togglePassword") if (e.type == "password") { e.type = "text" } else { e.type = "password" } }En la solución a continuación, la entrada del usuario está oculta de forma predeterminada, ya que el atributo de tipo del elemento <input> es contraseña. Al hacer clic en <i> , se cambiará la clase aplicada a <i> y se hará visible la contraseña.
const icon = document.getElementById('togglePassword'); let password = document.getElementById('password'); /* Event fired when <i> is clicked */ icon.addEventListener('click', function() { if(password.type === "password") { password.type = "text"; icon.classList.add("fa-eye-slash"); icon.classList.remove("fa-eye"); } else { password.type = "password"; icon.classList.add("fa-eye"); icon.classList.remove("fa-eye-slash"); } }); <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/> <div class="col-md-6"> <label>Password: </label> <input type="password" id="password"> <i class="fa fa-eye" id="togglePassword"></i> </div>