I want to add a "view password" icon inside of an html input. To do that, I added the material icons font and used one of its components. I nested it inside of the input to allow me to position it according to the input. I set the positon property of the input as "relative" and the position property of the icon as "absolute," but somehow, it still positions absolutely relative to the whole page. How can i fix this?
.auth-input {
text-align: left;
padding: 7px 10px;
background-color: #f6f6f6;
border: none;
border-radius: 5px;
font-size: 1.05em;
width: 100%;
position: relative;
}
i.material-icons {
position: absolute;
top: 0
}
<input type="password" name="password" id="password-input" class="auth-input">
<i class="material-icons">visibility</i>
</input>