Svelte on:click called on load

In my Svelte component why is the on:click={checkItem} event being called when the component is mounted?

Item.svelte:

<script>    import { createEventDispatcher } from "svelte";    const dispatch = createEventDispatcher();    export let item;    $: icon = item.checked ? "check_box" : "check_box_outline_blank";    function checkItem() {        item.checked = !item.checked;        dispatch("clicked");    }</script><section class="card"><div class="inputRow"><i on:click={checkItem} class="material-icons">{icon}</i><p>{item.name}</p><i class="material-icons">edit</i></div></section>

In the parent component I just listen to the event and log "click".

List.svelte (parent):

{#each items as item}<Item bind:item on:clicked={console.log("click")} />{/each}

This prints "click" to the console when the component is loaded but not when I click the icon.

I want the checkItem function to run only when the icon is clicked.