How do I place an eye icon that can reveal or hide password inside the input?

Question

How do I make to replace the button of Ver ou ocultar senha by an eye inside the Password input (at the end of the right side)? I’m not very good at front-end and remembering that attribute title shall not be amended or <input> nor the icon of the eye.

function viewSenha(){
			var tipo = document.getElementById("senha")
			if (tipo.type == "password") {
				tipo.type = "text";
			}else{
				tipo.type = "password";
			}
		}

<p> Senha: <input type="password" name="senha" id="senha" title="Campo para inserir a senha de login do funcionário" size="30" maxlength="32" required=""> <button type="button" title="Ver ou ocultar senha" onclick="viewSenha()"> Ver ou ocultar senha </button> </p>

Answer 1

Here is a simple option, using a img within the btn, plain as that...

I gave a all: unset to clear all standard button styles user-agent and put the image inside, since inside a <button> is allowed Flow Content (tag <img>)

The padding that I put in the input is for the text not to go to the end, thus getting covered, because the btn would be on top... I left the comment in CSS below.

function viewSenha(){
  var tipo = document.getElementById("senha")
  if (tipo.type == "password") {
    tipo.type = "text";
  }else{
    tipo.type = "password";
  }
}

#senha {
  /* esse valor deve ser o mesmo do margin left aplicado no btn abaixo */
  padding-right: 30px; 
}
#senha + button,
#senha + button:hover,
#senha + button:focus {
  all: unset;
  position: relative;
  margin-left: -30px;
  cursor: pointer;
}

<p> Senha: 
  <input type="password" name="senha" id="senha" title="Campo para inserir a senha de login do funcionário" size="30" maxlength="32" required=""> 
  <button type="button" title="Ver ou ocultar senha" onclick="viewSenha()">
    <img src="https://unsplash.it/16/16">
  </button> 
</p>

Answer 2

I’m going to leave a very simple example just by complementing the answer from @hugocsl, using icons from font-awesome implementing an icon exchange as you click:

var tipo = document.getElementById('senha')

document.getElementById('pass').addEventListener('click', () => {
  if(tipo.value) {
    tipo.type == 'password' ? tipo.type = 'text' : tipo.type = 'password';
    tipo.focus()
    document.getElementById('pass').style.display = 'none';
    document.getElementById('text').style.display = 'inline-block';
  }
})

document.getElementById('text').addEventListener('click', () => {
  if(tipo.value) {
    tipo.type == 'text' ? tipo.type = 'password' : tipo.type = 'text';
    tipo.focus()
    document.getElementById('text').style.display = 'none';
    document.getElementById('pass').style.display = 'inline-block';
  }
})

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

i {
  margin-left: -25px;
  cursor: pointer;
}

#text {
  display: none;
}

<p> Senha:
  <input type="password" name="senha" id="senha" title="Campo para inserir a senha de login do funcionário" size="30" maxlength="32" required="">
  <i class="fa fa-eye" id="text"></i>
  <i class="fa fa-eye-slash" id="pass"></i>
</p>

OBS : In my example the CSS was just to make the same example, I do not know if it is the best there for your case. OBS : If you want to use images instead the javascript logic would be the same.