Vuetify: [Feature Request] Ability to set/change icon of v-app-bar-nav-icon

[avanishp2]

Problem to solve

Environment
Vuetify Version: 2.0.7
Vue Version: 2.6.10

Steps to reproduce
Disable default icon from vuetify and use mdi/js for custom icon. Load your page and you can see that App bar icon im mobile site vanished. There is no way to set the icon manually.

Expected Behavior
App bar should have icon slot to set or change the icon manually in case of using other icon library. i.e. mdiSvg, mdi/js

Actual Behavior
no icon visible in mobile and there is no way to set icon for App bar

Proposed solution

Icon slot should be provided to accomodate the change of icon for v-app-bar-nav-icon

[KaelWD]

v-app-bar-nav-icon literally just renders <v-btn icon><v-icon>$menu</v-icon></v-btn> which uses the global iconfont config: https://vuetifyjs.com/en/customization/icons

[avanishp2]

Its work in case of mdi or md but not for mdiSvg..

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

In above case, we have locally or globally specify the icon component... there is no way of setting for v-app-bar-nav-icon

Please tell me how to configure this..

[beerwin]

I think, this is still valid. What if anyone wanted to change the icon based on menu open state?

For example:

• Show a different icon if the menu is open, or
• just completely replace the icon with another one from the icon font.

An option here either with props or slots should be available.

[frederikheld]

Maybe I'm not getting you right, but <v-app-bar-nav-icon> can be used to set the nav icon within <v-app-bar>. Isn't this exactly what you're looking for?

Example:

<v-app-bar>
    <v-app-bar-nav-icon
      v-if="isSubPage()"
      @click.stop="navigateBack()"
    >
      <v-icon>
        mdi-arrow-left
      </v-icon>
    </v-app-bar-nav-icon>

    <v-app-bar-nav-icon
      v-if="isMainPage()"
      @click.stop="openNavDrawer()"
    >
      <v-icon>mdi-menu</v-icon>
    </v-app-bar-nav-icon>

    <v-toolbar-title>{{ title }}</v-toolbar-title>
</v-app-bar>

This is how it works for me. I hope this helps.