How to switch icons on click?

[hsuanya]

When I click a button which contains a icon, what should I do to change the object in data and I can immediately see it changing in a js function? I am a student tring to learn by myself, if I ask something stupid, I am very sorry. Thank you.

[mzmcgrat]

Swapping icons can be handled with Svelte's built-in reactivity. Just import the icons you want into your component, and have an event (such as click) change the icon that the button is displaying. You can store them directly in a variable, or use more complex logic like an {#if} block or array, and have the event call your function which will change the icon being referenced in the button.

Here's a REPL as an example: https://svelte.dev/repl/ed0db62526e847508285b23837095384?version=3.47.0