Значок циновки, плавающий справа от ввода и не центрированный с набранным текстом

Question

Я пытаюсь добавить значок в начале текстового поля ввода с использованием углового материала 6 значков, но, похоже, он находится справа и в середине ввода, а не по центру набранного текста.

Вот мой html-скрипт:

<mat-form-field appearance="outline" class="example-full-width" color="warn">
   <mat-label>Username</mat-label>
   <mat-icon matPrefix color="warn">user_group</mat-icon>
   <input matInput id="login-username" formControlName="username" type="text" class="form-control" name="username"
          placeholder="username or email">
</mat-form-field>&nbsp;

А вот блик стека:

https://stackblitz.com/edit/mat-icons-abevly

Я хочу, чтобы иконка была в началеввод и центрируется с набранным текстом.Я пытался matSuffix, но он дает тот же результат

Answer 1

Вы можете переопределить scss, переключившись на центральный гибкий контейнер (mat-form-field-flex) и удалив отступы на вводе / выборе (mat-form-field-infix).Смотрите пример ниже:

::ng-deep {
    mat-form-field {
        span[matprefix] {
            color: #828182;
            margin: 0.4rem;
        }

        div.mat-form-field-flex {
            align-items: center !important;
        }
        div.mat-form-field-infix {
            padding: 0 !important;
            border-top: 0 !important;
        }
        div.mat-form-field-wrapper {
            padding-bottom: 0.5em;
        }
    }
}

Answer 2

Ваш пример использует Angular / Angular Material v5.В v5 селекторы директив MatPrefix и MatSuffix были mat-prefix и mat-suffix only - matPrefix и matSuffix не поддерживались до v6.Итак, вы использовали неправильный селектор директив.Попробуйте:

<mat-icon mat-prefix color="warn">user_group</mat-icon>

Или переключитесь на v6 +.