Nav Menu icons off position - Vue/Vuetify

Question

I've re-modeled my menu bar, but I am having this "bug" in which the icons seem to be off position from where they are supposed to be. Any ideas how I can fix this issue? Also, how can I increase the spacing between the icons? Any tips to improve the code are welcome. Thank you.

Reference picture: The icons bug

Vue/Vuetify code:

<template>
    <v-toolbar color="#009688" flat>
        <v-toolbar-title class="title">Test Page</v-toolbar-title>
        <v-divider></v-divider>

    <v-tooltip
            bottom
            v-for="item in items"
            :key="item.title"
            >
        <template v-slot:activator="{ on, attrs }">
        <v-btn icon>
            <router-link :to="{ path:item.path }" style="text-decoration: none; color: inherit;">
            <v-list-item-icon>
                <v-icon
                dark
                v-bind="attrs"
                v-on="on"
                large
                md3 >
                {{ item.icon }}
                </v-icon>
            </v-list-item-icon>
            </router-link>
        </v-btn>
        </template>
        <span>{{item.title}}</span>
    </v-tooltip>

    </v-toolbar>
</template>
>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      menu: true,
      items: [
        { title: 'Home', icon: 'mdi-home', path: '/' },
        { title: 'Login', icon: 'mdi-account', path: '/login' },
        { title: 'Register', icon: 'mdi-pencil', path: '/register' },
        { title: 'Logout', icon: 'mdi-logout', path: '/' }
      ],
      color: 'primary'
    }
  }
}
</script>

Answer 1

Just remove v-list-item-icon, this component is only usefull when you use v-list-item.

      <router-link
        :to="{ path: item.path }"
        style="text-decoration: none; color: inherit"
      >
        <v-icon dark v-bind="attrs" v-on="on" large md3>
          {{ item.icon }}
        </v-icon>
      </router-link>