Change the icon used by v-toolbar-side-icon?

Question

Is it possible to change the icon used in by v-toolbar-side-icon to a custom one?

    <template>
      <v-toolbar>
        <v-toolbar-side-icon></v-toolbar-side-icon>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
          <v-btn flat>Link One</v-btn>
          <v-btn flat>Link Two</v-btn>
          <v-btn flat>Link Three</v-btn>
        </v-toolbar-items>
      </v-toolbar>
    </template>

There is no props or documentation for that component itself in https://next.vuetifyjs.com/en/components/toolbars

Answer 1

At this time, you can change it the by doing this:

<v-app-bar-nav-icon>
          <v-icon>mdi-database</v-icon>
        </v-app-bar-nav-icon> 

Where <v-icon>mdi-database</v-icon> is which icon i want to display instead the default one.

The result must be : Change vuetify app-bar-nav-icon

Hope it can help you.

Answer 2

<v-toolbar-side-icon> has been deprecated in Vuetify 2.0

Please use <v-app-bar-nav-icon></v-app-bar-nav-icon> instead.

Answer 3

EDIT:
This solution was initially for Vuetify v1. See other answer for v2.

---

Codepen

Use custom v-icon in v-toolbar-side-icon's default slot

<v-toolbar-side-icon>
  <v-icon>more_vert</v-icon>
</v-toolbar-side-icon>