JavaScript: Show password icon

I have this HTML...

<div class="signin-form-label-group">
        <input type="password" id="password" name="password" class="form-control"
               placeholder="Password"
               required>
        <label for="password">Password</label>
        <span toggle="#password" class="mdi mdi-eye-off toggle-password"></span>
      </div>

And this JavaScript...

$(".toggle-password").click(function() {
      $(this).toggleClass("mdi mdi-eye");
      var input = $($(this).attr("toggle"));
      input.type === "password" ? input.type = "text" : input.type = "password";
    });

I am using material design icons. Problem is that when clicking the eye-off icon, the text is displayed but the icon does not change to eye only. Any way to fix it?