title: Adding icon to the Angular Material input
body: <p>I am trying to achieve the following thing with angular material input with an appearance outline.</p>
  <p><a href="https://i.stack.imgur.com/gqJnF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gqJnF.jpg" alt="enter image description here" /></a></p>
  <p>To add an icon with an outline at the right side of the input, this image also should be inside the material tab. So far so good my code looks like this:</p>
  <pre><code>&lt;div class=&quot;bigInputDiv&quot;&gt;
  &lt;mat-form-field class=&quot;inputSEARCH&quot; appearance=&quot;outline&quot;&gt;
  &lt;mat-label&gt;WWW&lt;/mat-label&gt;
  &lt;input matInput type=&quot;text&quot; formControlName='piradiNomeri'&gt;
  &lt;img (click)=&quot;moqalaqeSearch('You clicked moqalaqe')&quot; [ngClass]=&quot;(moqalaqeTAB.get('piradiNomeri').invalid &amp;&amp; moqalaqeTAB.get('piradiNomeri').touched)?'svg error':'svg'&quot; [src]=&quot;iconPath + 'addPersonSearch.svg'&quot;&gt;
  &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and style as well</p>
  <pre><code>.bigInputDiv{
  width: 100%;
  max-width: 570px;
  display: inline-flex;
  width: 100%;
  max-width: 700px;
  
  .inputSEARCH {
    width: 100%;
    max-width: 565px;
    border-radius: 3px 0px 0px 3px!important;
  
    .svg {
      width: 48px;
      height: 47px;
      border-radius: 0px 4px 4px 0px;
      background-color: rgba(0,0,0,.12);
      cursor: pointer;
      padding: 10px;
      margin: 5px;
      position:absolute;
      margin-top: -20px;
      margin-left: -39px;
      &amp;.error{
        background-color: red;
      }
      &amp;:hover {
        background-color: black;
      }
    }
    :hover ~ .svg {
      background-color: black;
    }
    :focus ~ .svg {
      background-color: blue;
    }
    .ng-touched.ng-invalid ~ .svg {
      background-color: red;
    }
  }
  }
  </code></pre>
  <p>I believe the problem is with this part</p>
  <pre><code>  .svg {
      width: 48px;
      height: 47px;
      border-radius: 0px 4px 4px 0px;
      background-color: rgba(0,0,0,.12);
      cursor: pointer;
      padding: 10px;
      margin: 5px;
      position:absolute;
      margin-top: -20px;
      margin-left: -39px;
      &amp;.error{
        background-color: red;
      }
      &amp;:hover {
        background-color: black;
      }
    }
  </code></pre>
  <p>In order to achieve my goal I had to use a lot of unreliable codes with margins and sizes, etc. because of that my input doesn't look stable, what I mean by that is that on different screens input looks really awful and out of mat input field.</p>