How to change a search input box into a search icon as in mobile view

Example: Default magento search form : only required part shown in example, in phtml only update the attribute of elements

Form Element add extra class = searchbox

Form Input search box add extra class = searchbox-input & onkeyup=buttonUp()

Form Submit button extra class = searchbox-submit

And Next to submit button add a span element

<span class="searchbox-icon">Find</span>

<form class="form minisearch searchbox" id="search_mini_form" ...>
        <div class="field search">
            <label class="label" ... >
                <span>Search</span>
            </label>
            <div class="control">
                <input id="search" type="text" ... class="input-text searchbox-input" onkeyup="buttonUp();">

            </div>
        </div>
        <div class="actions">
            <button type="submit" class="action search  searchbox-submit" >
                <span>Go</span>  
            </button>

            <span class="searchbox-icon">Find</span>

        </div>
    </form>

As your required for mobile only so add css in mobile media query that is below 768px

.searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;

    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:red;
}


.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}


.searchbox-icon,
.searchbox-submit{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}



.searchbox-open{
    width:100%;
}

.label {
   border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

As your required for mobile only so trigger js in mobile below 768px only

  $(document).ready(function(){
        var submitIcon = $('.searchbox-icon');
        var inputBox = $('.searchbox-input');
        var searchBox = $('.searchbox');
        var isOpen = false;
        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('searchbox-open');
                inputBox.focus();
                isOpen = true;
            } else {
                searchBox.removeClass('searchbox-open');
                inputBox.focusout();
                isOpen = false;
            }
        });  
         submitIcon.mouseup(function(){
                return false;
            });
        searchBox.mouseup(function(){
                return false;
            });
        $(document).mouseup(function(){
                if(isOpen == true){
                    $('.searchbox-icon').css('display','block');
                    submitIcon.click();
                }
            });
    });
    function buttonUp(){
            var inputVal = $('.searchbox-input').val();
            inputVal = $.trim(inputVal).length;
            if( inputVal !== 0){
                $('.searchbox-icon').css('display','none');
            } else {
                $('.searchbox-input').val('');
                $('.searchbox-icon').css('display','block');
            }
    }

Note : It just an example to achieve your output, update css and js per your need.