Laravel-mix / Vuetifiy / @Mdi icon now showing

all i can see is rectangle

  <v-icon color="white" >mdi-plus</v-icon>

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)
const opts = {}
export default new Vuetify({
       icons: {
    iconfont: 'mdi' 
  },
...

package.json

"devDependencies": {
    "@mdi/font": "^6.9.96",
    "axios": "^0.27.2",
    "cross-env": "^5.0.1",
    "deepmerge": "^4.2.2",
    "jquery": "^3.6.0",
    "js-md5": "^0.7.3",
    "laravel-mix": "^4.0.0",
    "lodash": "^4.17.21",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.32.13",
    "sass-loader": "^7.3.1",
    "vue": "^2.7.4",
    "vue-template-compiler": "^2.7.4",
    "vuetify-loader": "^1.7.2"
  },

webpack.mix.js

let mix = require('laravel-mix');

 module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}



mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')

M-K

3 years ago

Level 2

the same for font awesome

app.scss

// [email protected]
$fa-font-path: "../webfonts";

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

public/css/app.css

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url([object Module]);
  src: url([object Module]?#iefix) format("embedded-opentype"), url([object Module]) format("woff2"), url([object Module]) format("woff"), url([object Module]) format("truetype"), url([object Module]#fontawesome) format("svg");
}

Please or to participate in this conversation.