title: Ionic 3 with icon inside ion input at the right side using grid
body: <p>I have a <strong>login form</strong> that has an <strong>email</strong> and <strong>password</strong> <code>input</code>. What I want to do is a <strong>little eye outline icon</strong> on the right side of the input. That has a function that will <strong>show and hide</strong> the <code>password</code>.</p>
  
  <p>The function is fully working however. I can't get the design that I want to. Something like <a href="https://prnt.sc/gz12xg" rel="nofollow noreferrer">this</a>. But in my case I am not using a <code>&lt;ion-item&gt;</code></p>
  
  <p>Here is my code in my <strong>html</strong></p>
  
  <pre><code>    &lt;ion-row class="p-l-4"&gt;
            &lt;ion-col col-12 class="col-static"&gt;
              &lt;ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required&gt;&lt;/ion-input&gt;
  &lt;!-- Small button icon of eye goes here --&gt;
            &lt;/ion-col&gt;
          &lt;/ion-row&gt;
  </code></pre>
  
  <p>I tried to do anything with it but ended up messing it. Because my input has a border.</p>
  
  <p>Here is the image below of the result.</p>
  
  <p><a href="https://i.stack.imgur.com/HAUyN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HAUyN.png" alt="enter image description here"></a></p>
  
  <p>Here is my code of my input in <strong>scss</strong></p>
  
  <pre><code>ion-input {
    border: 5px !important;
  }
  
  .text-input-ios, .text-input-md {
      border-radius: 5px;
      border: 1px solid #efefef;
  }
  
  .text-input {
      margin: 0;
      width: calc(100% - 8px);
      padding: 13px 8px;
  }
  </code></pre>
  
  <p>Appreciate if someone could help.
  Thanks in advance.</p>