Vue Application CSS-Loader And Vuetify Icons

I have a Vue2 application that is utilizing Vuetify.

I've noticed that, when using the material design icons, the application is reaching out to a CDN to retrieve those icons which causes render blocking issues.

I've followed the documentation here to install locally, but I can still see the CDN being accessed in the network tab of my browser inspector.

I used the vue cli to generate the app so I am unfamiliar with using webpack to reference css-loader. My config is listed below:

// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import store from './store'

Vue.config.productionTip = false

new Vue({
  vuetify,
  store,
  render: h => h(App)
}).$mount('#app')

// /src/plugins/vuetify.js
import '@mdi/font/css/materialdesignicons.min.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
});

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ]
})