Fixed show/hide password issue with account page Astra theme.

gistfile1.txt

.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
    position: relative;
    cursor: pointer;
}

.woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
    right: 0.7em;
    top: 0.4em;
    cursor: pointer;
     position: absolute;
    font-family: WooCommerce;
    speak: never;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-left: 0.618em;
    content: "";
    text-decoration: none;
}

This css code has worked better for me:

.woocommerce form .password-input, .woocommerce-page form .password-input {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.woocommerce form .password-input input[type=password], .woocommerce-page form .password-input input[type=password] {
padding-right: 2.5rem;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
position: absolute;
right: 0.7em;
top: 0.7em;
cursor: pointer;
}
.woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
font-family: WooCommerce;
speak: never;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
margin-left: 0.618em;
content: "\e010";
text-decoration: none;
}

An existing problem with Gaurav's original solution (from my attempting implementation) occurred when the password HINT was added to the foray -- as it forced the eye icon to reposition out of the input text field.

In using an Astra starter theme/WooCommerce template, here is my work-around:

.woocommerce form .password-input, .woocommerce-page form .password-input {
position: relative;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
position: absolute;
right: 0.7em;
[[ Adjusting top position to your layout's parameters ]]
top: -0.4em;
cursor: pointer;
}
.woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
font-family: WooCommerce;
[[ speak: never - triggered as an invalid value ]]
speak: none;
content: "\e010";
color: black;
[[ Changing icon's default font size based on visual preference ]]
font-size: 130%;
opacity: 0.4;
}
.woocommerce form .display-password::after, .woocommerce-page form .display-password::after {
[[ Adds toggling change-over effect between on and off ]]
opacity: 1;
}

---

Screenshot example:
https://cmr74-resources.s3.us-west-1.amazonaws.com/cheers-1.gif

𝐶ℎ𝑒𝑒𝑟𝑠!

This worked for me - needed to include the link to font-family: dash-icons

Add to your theme stylesheet.

.woocommerce form .password-input, .woocommerce-page form .password-input {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.woocommerce form .password-input input[type=password], .woocommerce-page form .password-input input[type=password] {
padding-right: 2.5rem;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
position: absolute;
right: 0.7em;
top: 0.7em;
cursor: pointer;
}
.woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
font-family: dashicons;
speak: never;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
margin-left: 0.618em;
content: "\f177";
text-decoration: none;
}