title: Show password icon
body: <p>I have this HTML...</p>
  
  <pre><code>&lt;div class="signin-form-label-group"&gt;
          &lt;input type="password" id="password" name="password" class="form-control"
                 placeholder="Password"
                 required&gt;
          &lt;label for="password"&gt;Password&lt;/label&gt;
          &lt;span toggle="#password" class="mdi mdi-eye-off toggle-password"&gt;&lt;/span&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>And this jQuery:</p>
  
  <pre><code>$(".toggle-password").click(function() {
        $(this).toggleClass("mdi mdi-eye");
        var input = $($(this).attr("toggle"));
        input.type === "password" ? input.type = "text" : input.type = "password";
      });
  </code></pre>
  
  <p>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?</p>
  
  <p>EDIT: I found that the problem actually is...
  By default the class has <code>class="mdi-eye-off toggle-password mdi"</code>. When clicking on the eye-off, this happens...
  <code>class="mdi-eye-off toggle-password mdi-eye"</code>
  Surely the mdi-eye-off should have been removed due to the toggle class. But is hasn't. Why? How to solve?</p>