Angular Material：MatIcon 上的 MatTooltip 位置和样式被破坏

Question

我正在尝试在材质输入字段中使用材质图标。该图标应显示材质工具提示。

结果是一个很好的动画，但完全没有样式（如主文本）并且工具提示的位置完全错误。

我哪里做错了？

我的HTML：

<section>
    <div class="row">
      <mat-form-field>
        <input matInput name="newPin" placeholder="Neue PIN" required type="password"
           [(ngModel)]="newPin" [disabled]="!selectedToken">          
          <mat-icon matTooltip="{{getPinTooltip()}}" [matTooltipPosition]="'below'">
              info
          </mat-icon>         
      </mat-form-field>
      <mat-form-field>
        <input matInput name="controlPin" type="password" required 
           placeholder="Neue PIN wiederholen"
           [(ngModel)]="controlPin" [disabled]="!selectedToken">
      </mat-form-field>
    </div>
</section>

还有我的少：

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;
    &: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;
}

它是这样的：