title: Angular Material: MatTooltip position and styling wrecked on MatIcon
body: <p>I'm trying to use an material icon within an material input field. This Icon shall show a material tooltip.</p>
  
  <p>The result is a nicely animated, but fully unstyled (like main text) and totally wrong positioned tooltip.</p>
  
  <p>Where did I go wrong?</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="row"&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput name="newPin" placeholder="Neue PIN" required type="password"
             [(ngModel)]="newPin" [disabled]="!selectedToken"&gt;          
            &lt;mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'"&gt;
                info
            &lt;/mat-icon&gt;         
        &lt;/mat-form-field&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput name="controlPin" type="password" required 
             placeholder="Neue PIN wiederholen"
             [(ngModel)]="controlPin" [disabled]="!selectedToken"&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And my less:</p>
  
  <pre><code>body {
    font-family: Helvetica, FreeSans, sans-serif;
    background-image: url('./assets/images/background.jpg');
  }
  
  section {
    margin-top: 2em;
  }
  
  .row {
    margin-bottom: 1rem;
  }
  
  mat-form-field {
    color: @inputfield-text-color;
    width: 95%;
    margin-bottom: .5em;
  
    .mat-input-element {
      background-color: @inputfield-background-color;
      border-radius: .3em;
      padding: 1em 0.6em 0.2em 0.6em;
      line-height: 1.7em;
      &amp;:disabled {
        background-color: @inputfield-disabled-color;
        color: dimgrey;
      }
    }
    .mat-form-field-label-wrapper {
      left: 0.6em;
      top: 0.3em;
      font-size: .8em;
    }
  }
  
  // here I tried to fix it, but it had no effect:    
  .input-tooltip-icon {
    position: absolute;
    z-index: 1;
    top: .3em;
    right: -.50em;
    cursor: context-menu;
    color: @button-color;
  }
  </code></pre>
  
  <p>This is how it looks like:
  <a href="https://i.stack.imgur.com/A0CQi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A0CQi.png" alt="enter image description here"></a></p>