Is it possible to hide the input within my search form until my Font Awesome Icon is clicked?

This is the code I have but it doesn’t work…

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
    <input type="search" class="search-field"
        placeholder="<?php echo esc_attr_x( 'Search...', 'placeholder' ) ?>"
        value="<?php echo get_search_query() ?>" name="s"
        title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    <i class="fas fa-search"></i>
</label>

jQuery(function ($) {
$(".fa-search").click(function() {
    $('.search-field').slideToggle(200);
});
});