This way
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
input, input[type=password]
{
width: 150px;
height: 20px;
}
#toggle_pwd
{
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css" />
<asp:TextBox ID = "txtPassword" runat="server" TextMode = "Password" />
<span id="toggle_pwd" class="fa fa-fw fa-eye field_icon"></span>
<script type="text/javascript">
$(function () {
$("#toggle_pwd").click(function () {
$(this).toggleClass("fa-eye fa-eye-slash");
var type = $(this).hasClass("fa-eye-slash") ? "text" : "password";
$("[id*=txtPassword]").attr("type", type);
});
});
</script>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input, input[type=password]
{
width: 150px;
height: 20px;
}
#toggle_pwd
{
cursor: pointer;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css" />
<input type="password" id="txtPassword" />
<span id="toggle_pwd" class="fa fa-fw fa-eye field_icon"></span>
<script type="text/javascript">
$(function () {
$("#toggle_pwd").click(function () {
$(this).toggleClass("fa-eye fa-eye-slash");
var type = $(this).hasClass("fa-eye-slash") ? "text" : "password";
$("#txtPassword").attr("type", type);
});
});
</script>
</body>
</html>
Demo
