[SOLVED] F7 Icon not changing dynamically via Javascript

Questions
1

Hello,

I have implemented toogleClass for my password field.

My HTML

<li class="item-content item-input">
	<div class="item-inner">
		<div class="item-title item-label">Password</div>
		<div class="item-input-wrap">
			<input type="password" placeholder="Your password" id="password" class="">	
			<span toggle="#password-field" class="toggle-password" id="my_password_icon" ><i class="f7-icons field-icon">eye</i></span>													
		</div>
	</div>
</li>

My script

pageMounted: function() {
			
	var self = this;
	
	console.log("mounted 3");
	
	$(".toggle-password").click(function() 
	{
											
		console.log($(".toggle-password").html());
							
		if ($('#password').attr("type") == "password") 
		{
			$('#password').attr("type", "text");
			$("#my_password_icon").html('<i class="f7-icons field-icon">eye_off</i>');
		} 
		else 
		{
			$('#password').attr("type", "password");
			$("#my_password_icon").html('<i class="f7-icons field-icon">eye</i>');
		}

	});
						
}

However for some strange reason the eye_off does not seem to load.

What am I missing?

2

Make sure you are using latest version of F7 icons

1 Like
3

I upgraded and it worked! The icon eye_off was not available in the version I was using. Thanks!