CODEWITHSUNDEEP
vue.jsmaterial-designvue-componentvuetify.jsvue-cli
moses toh
moses toh

Reputation: 13172

Why vuetify icon not showing?

I using vuetify latest version. I following this tutorial https://vuetifyjs.com/en/getting-started/quick-start

In the vue componet I try like this :

  <v-text-field
    append-icon="mic"
    class="mx-4"
    flat
    hide-details
    label="Search"
    prepend-inner-icon="search"
    solo-inverted
  ></v-text-field>

The result like this :

image

In my public/index.html like this :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>msm-website-appointment</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but msm-website-appointment doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

it looks like the design material has been loaded. but why doesn't the icon appear?

Upvotes: 3

Views: 9414

Answers (3)

alexcodes
alexcodes

Reputation: 415

To fix your issue, you should import mdi as your default icon set. Otherwise, vuetify will not know where to load this icon from. To do this, follow these steps: Described in more detail in this article: https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/

  1. Install

    npm install @mdi/font

  2. Import

    import* '@mdi/font/css/materialdesignicons.css'

  3. Add

 const vuetify = createVuetify({ // Replaces new Vuetify(...) in vue3
    theme: {
        defaultTheme: 'dark'
    },
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi
        }
    }

Upvotes: 1

Shayan
Shayan

Reputation: 2471

You can also load it directly in the component in case the mdi package is missing in the build.

  <v-text-field
    :append-icon="icons.mdiMicrophone"
    class="mx-4"
    flat
    hide-details
    label="Search"
    :prepend-inner-icon="icons.mdiMagnify"
    solo-inverted
  />

<script>
import { mdiMicrophone, mdiMagnify } from '@mdi/js'

export default {
    data() {
        return {
            icons: {
                mdiMicrophone
            }
        }
    }
}

Upvotes: 0

Yom T.
Yom T.

Reputation: 9180

You are probably referencing mdi (Material Design Icons font) 👈 according to the documentation, while your v-text-field is using a different one (defaults to md in version ^1.5), thus the missing icons.

To fix this issue, you'll want to add the required icon font, or if you will opt for mdi, do the following adjustments (note the icons property binding part being prefixed with mdi-):

<v-text-field
  append-icon="mdi-microphone"
  class="mx-4"
  flat
  hide-details
  label="Search"
  prepend-inner-icon="mdi-magnify"
  solo-inverted>
</v-text-field>

As a side note, since you've initialized the app with Vue CLI, you no longer need to import the icons from the CDN as they will be taken care of by the build process, so feel free to remove it from your public/index.html file.

Upvotes: 9

Related Questions