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

user_242042 0
Viewed 17422

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

vuetify.js
5 Answers

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

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

user_106007460

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>

.

.

.

META:

This answer received a down-vote and no follow-up explanation for it. So if this is not working for someone (in some recent version for example), or is not clear enough, please comment below.

user_19812470

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.

user_124619210

For the users who uses mdi, the icon is

<v-icon>mdi-menu</v-icon>

And here is the link of the reference

(vuetify version 2.5.6)

Hopefully, this answer could help the developer who faced similar issues as I did.

user_124953880

For me, it only works if I add the icon prop:

<v-app-bar-nav-icon icon >  
<v-icon color = "red">mdi-database</v-icon>
</v-app-bar-nav-icon>
user_176822450
Related