CODEWITHSUNDEEP
vuetify.js
Archimedes Trajano
Archimedes Trajano

Reputation: 41450

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

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

Upvotes: 12

Views: 19979

Answers (5)

Traxo
Traxo

Reputation: 19012

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>

Upvotes: 14

Ionica Both
Ionica Both

Reputation: 11

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>

Upvotes: 1

DamonWu
DamonWu

Reputation: 134

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.

Upvotes: 0

Dahkenangnon
Dahkenangnon

Reputation: 96

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.

Upvotes: 3

Neal Mummau
Neal Mummau

Reputation: 390

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

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

Upvotes: 19

Related Questions