Vuetify: [Bug Report] 'v-app-bar-nav-icon' is not shown

Created on 24 Jul 2019  路  5Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.0
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

Create a single-file component :

<template>
  <nav>
    <v-app-bar >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
    </v-app-bar>
  </nav>
<template>

<script>
export default {

  }
</script>

Expected Behavior

A navigation icon appears inside v-app-bar

Actual Behavior

The button is there, because I can see the hover effect, but the icon is not shown

Reproduction Link

https://codepen.io/Okptopoid/pen/VoaELQ

triage

Most helpful comment

Thank, that was my problem. I solved it adding this line to my index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">

All 5 comments

Seems you are missing icon fonts. Vuetify 2.0 uses mdi by default now instead of md.
eg: https://codepen.io/anon/pen/JgXmBL

Thank, that was my problem. I solved it adding this line to my index.html:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">

Thanks

Thanks all. I had the same issue after upgrade to vuetify 2.0. I had updated the icon font correctly to mdi but missed the reference to the icon font itself.

Refer to installing material design icon fonts for vuetify different options.

@Octopodo Thanks! Works perfect!

Was this page helpful?
0 / 5 - 0 ratings