Toggle Eye Icon for Password Visibility in SfTextBox for .NET MAUI Blazor

I am using the SfTextBox in a .NET MAUI Blazor application to create a password field with an eye icon to toggle password visibility. My goal is to change the icon from an "eye" to an "eye-slash" (or similar) whenever the user clicks to show/hide the password.

<SfTextBox

ID="passwordBox"@ref="TextBoxPasswordObj"@bind-Value="_tokenModel.Password"ValueChange="@PasswordValueChangeHandler"Input="@PasswordInputHandler"Type="@TextBoxType"CssClass="input-box"Placeholder="Password"Created="@AddPwdIcon"Destroyed="AddPwdIconDestroyed"FloatLabelType="@FloatLabelType.Auto"@onkeydown="OnPasswordInputKeyDown"></SfTextBox>

public async void AddPwdIcon() { // Adding the eye icon initially await TextBoxPasswordObj.AddIconAsync("append", "e-icons e-eye", new Dictionary<string, object>() { { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick) } }); }

public async Task PasswordClick() {await _JSRuntime.InvokeAsync<object>("showhidePassword", "passwordBox"); IsPasswordVisible = !IsPasswordVisible; }

//Java Script

function showhidePassword(textBoxId) {

const textBox = document.getElementById(textBoxId);const icon = textBox.parentElement.querySelector('.e-input-group-icon');icon.classList.toggle('fa-eye');icon.classList.toggle('fa-eye-slash');

}

The problem is that the icon does not change when I click on it to show or hide the password. I’ve used e-eye and fa-eye-slash classes, assuming they would toggle correctly, but the icon remains the same.

I want to change the icon after clicking it