Quasar: add mdi-v5

Created on 9 Mar 2020 · 8Comments · Source: quasarframework/quasar

I believe this issue is faced by all who use material icons. The library is outdated.
It would be cool to have 'mdi-v5' as an icon option.
Actually the Material Design Icons is on version 5.0.45.

feature request

Source

GuilhermeSnts

Most helpful comment

I see no problem except you're using incorrect icon names.
Check here for the names of MDI v5 icons: https://cdn.materialdesignicons.com/5.2.45/

pdanpdan on 19 May 2020

😄1 👍1

All 8 comments

Hi,

Mdi v5 has just been released :) It'll go into quasar/extras soon.

rstoenescu on 10 Mar 2020

🎉1

Thank you @rstoenescu

GuilhermeSnts on 10 Mar 2020

Not ready yet. Working on the Quasar Icon Sets for v1.9.9.

rstoenescu on 10 Mar 2020

The Quasar Icon Sets will be available in "quasar" v1.9.9.
Otherwise, MDI v5 (both webfont and svg variants) are already available through "@quasar/extras" v1.6.0.

rstoenescu on 10 Mar 2020

Hi, I'm having problems in using MDI in an UMD environment. When I use the proposed code from https://quasar.dev/start/umd it simply does not work

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" type="text/css">
  <!-- 1 ok -->
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^5.0.0/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">
</head>

<body>

  <script>
    window.quasarConfig = {
      loadingBar: {
        //skipHijack: false,
        color: 'black',
        size: '1px',
        //position: 'bottom',
      }
    }
  </script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vuex/dist/vuex.min.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.min.js"></script>
  <script src="https://unpkg.com/http-vue-loader/src/httpVueLoader.js"></script> 
  <script src="https://unpkg.com/moment/min/moment.min.js"></script> 
  <script src="https://unpkg.com/lodash/lodash.min.js"></script> 

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
  <!-- 2 ok -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/icon-set/mdi-v5.umd.min.js"></script>

  <script>

    // 3 ok
    Quasar.iconSet.set(Quasar.iconSet.mdiV5)

    //....

  </script>
</body>

Here's a minimal example: https://jsfiddle.net/8L6g4tzm/9/

Thanks for your effort.