How to add expended search icon into a text box using vuetify?

Question

I recently started using vuetifyjs in my RTL project (written in Vue 2). I added a table in a card and I added the search bar as it's shown in the docs. I'm trying to do two things:

1. Move the "number of items to show" option from the footer to the top.
2. Make the search bar expendable from an icon.

Basically:

For the first case, I could not find a way to do this in the docs. For the second case, I'm trying to achieve this output:

I tried to look in the docs as well, but could not find a way to do this. I also came across with this article: Expand Searchbar with Search icon as well as show close icon onclick using Javascript

My current code:

<div>
  <v-card>
    <v-card-title>
      <v-text-field
        v-model="searchText"
        append-icon="mdi-magnify"
        label="חיפוש"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      class="elevation-1"
      :headers="headers"
      :items="items"
      :items-per-page="itemsPerPage"
      :footer-props="settings"
    >
    </v-data-table>
  </v-card>
</div>

Where:

settings: {
 'items-per-page-options': [10, 25, 50, 100],
 'items-per-page-text': 'סהכ'
},
itemsPerPage: 10

Is it possible to achieve this using vuetify?