Angular поле пароля на странице входа показывает значок двойного глаза ⇐ CSS

[Anonymous]

Я новичок в Angular и хочу создать страницу входа с полем для ввода пароля, включающим значок «fa fa-eye», чтобы показывать и скрывать пароль. Однако я заметил, что при вводе пароля в поле отображаются два значка глаз.
вот мой HTML-код

Код: Выделить всё

*Password is required

вот мой класс текстового скрипта

Код: Выделить всё

export class LoginComponent implements OnInit {

type: string = 'password';
isText: boolean = false;
eyeIcon:  string = 'fa-eye-slash'
loginForm!: FormGroup;
constructor(private fb: FormBuilder){}

ngOnInit(): void {
this.loginForm = this.fb.group({
username: ['', Validators.required],
password: ['', Validators.required]

})
}

hideShowPass(){
this.isText = !this.isText
this.isText ? this.eyeIcon = "fa-eye" : this.eyeIcon = "fa-eye-slash";
this.isText ? this.type = "text" : this.type = "password"
}
}

и это мой класс CSS

Код: Выделить всё

input[type='text'],
input[type='password']{
border: none;
outline: none;
box-shadow: none;
width: 100%;
}

.fa-eye-slash.btn{
border: none;
outline: none;
box-shadow: none;
}

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

Подробнее здесь: https://stackoverflow.com/questions/759 ... e-eye-icon