docs: replace svg icons with css icons

[userquin]

Description

This PR will replace @mdi/js in the docs, but will still use the library and @mdi/svg for the mdi autocomplete in font-icons page.

There are a lot of svg icons on every page, using css icons will remove all svg icons from every page and vue component: since we're using same icons on every page (navbar, menu, code), UnoCSS will include only used icons once (svg solution will include the same icon multiple times in the dom if included multiple times).

Additionally, with css icons we can include any other iconify json library adding the corresponding @iconify-json/<collection> dev dependency and using it with vuetify components or directly with html markup :

<v-icon icon="i-logos:discord"></v-icon>
<div class="i-logos:discord"></div>

✔️ We need to review export examples logic, maybe we should change the icons back to mdi-*.

FIXED: Right now the docs cannot be built on my local, I'm checking what's happening (vue error without the source):

Error

Markup:

NA

[userquin]

The entry point still huge 7.9MB, we'll need my other PR merged here #20260. The resulting css is about 809KB, the original 599KB.

[johnleider]

The only issue I see is that icon's won't work when you open an example in the Vuetify Playground.

[userquin]

Using UnoCSS we can install VSCode or JetBrains extensions for icon preview and suggestions/autocomplete, for example, adding these 2 extensions to VSCode:

• UnoCSS
• Iconify IntelliSense

There is also UnoCSS extension for JetBrains IDE, for example, on IntelliJ Ultimate Edition (suggestions/autocomplete not working, I'm going to file an issue):

[KaelWD]

The resulting css is about 809KB, the original 599KB.

So it replaces 100K of js strings with 200k of CSS?

[userquin]

Yes and no, it is adding only used icons, the optimal solution should be to include only in css navbar and playgroubd icons. The mdijs svg lib is huge.

Maybe this PR is not optimal with vuetify docs as a spa client app.

I Will check it using vue-scoped.