Vite + Vue3 in Electron: How to import and use Material Design icons @mdi/font (or any other icon font)

Question

I want to bundle @mdi/font icons into my app (it's an Electron app).

I installed npm i @mdi/font --save-dev:

  "devDependencies": {
    "@mdi/font": "^7.0.96",
  }

Then I imported the css/scss and I tried a few different methods:

• Import in main.ts: import '@mdi/font/css/materialdesignicons.css';
• Import as scss in main.scss: @import './node_modules/@mdi/font/scss/materialdesignicons.scss';
• Import as css in base.css: @import './node_modules/@mdi/font/css/materialdesignicons.css';

Then I used mdi-* css classes in the markup:

SideMenu.vue:

<template>
  <aside class="menu">
    <ul class="action-bar">
      <li class="action-item active">
        <a class="action-label icon">
          <i class="mdi-cog"></i>
        </a>
      </li>
      <li class="action-item">
        <a class="action-label icon">
          <i class="mdi-home"></i>
        </a>
      </li>
      <li class="action-item">
        <a class="action-label icon">
          <i class="mdi-content-copy"></i>
        </a>
      </li>
    </ul>
  </aside>
</template>

The application starts and runs but I see the same icon.

Things to consider:

• I don't want to use the method of each icon component (don't understand this), that's because I don't use "vue-material-design-icons" or something like that
• I don’t want to use CDN’s external links

Answer 1

Answering my own question. Thanks @Duannx, the solution is very simple - just add the missing mdi class:

<a class="action-label icon">
  <i class="mdi mdi-cog"></i>
</a>

Nothing specific to vite/vue/electron :)