robcresswell / vue-material-design-icons

Material Design Icons as Vue Single File Components

Hi there 👋

Find me on Mastodon!

vue-material-design-icons's Issues

The MoveToInboxIcon hasn't been found

This icon look like that https://material.io/resources/icons/?search=inbox&icon=move_to_inbox&style=baseline

Classes and ids are not being applied

Hey,

From v4.0.0, classes and ids do not show up in the page markup.

v3.4.0

v4.0.0

Reproduction - https://codesandbox.io/s/vue-template-qx0u9

Support for a single component that receives the icon name as a prop

It would be nice if I could do something like:

<mdi-icon name="arrow" /> 

And have only this mdi-icon component imported globally. This helps specially if I need to somehow dynamically change the icon.

Support import from top-level package

It would be nice to have ablity to import icons just from package, like this:

import {
  IconDoneky,
  IconMore,
} from "icons"

Right now i created simple python script for generating icons.js with lines like this

export { default as IconDonkey } from 'vue-material-design-icons/Donkey.vue'
export { default as IconMore } from 'vue-material-design-icons/More.vue'

Probably you can add something similar to build process, to create index.js.

为什么只能import一个Menu.vue，import其他的组件就报vue-material-design-icons不存在

import MdiMenu from 'vue-material-design-icons/Menu.vue'
import Abacus from 'vue-material-design-icons/Abacus.vue'

第一个import不会报错，第二个import报错

Vue3 - multiple compiler errors

"VueCompilerError: <template functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal <template> instead."

1. ArrowRight.vue
2. ChevronLeft.vue
3. ChevronRight.vue
4. Close.vue
5. DotsHorizontal.vue
6. Menu.vue
7. MenuDown.vue
8. Pause.vue
9. Pencil.vue
10. Play.vue
11. Undo.vue

styles.css overwrites custom fillColor

I use Nuxt.js and i am importing your package within a plugin like that:

import Vue from 'vue'
import 'vue-material-design-icons/styles.css'
import mdiContentSave from 'vue-material-design-icons/ContentSave.vue'

Vue.component('mdiContentSave', mdiContentSave)

When i set the fillColor property of an icon, it is overwritten by the css definition fill: currentColor within .material-design-icon > .material-design-icon__svg.

The local SVG color is definitly set.

I also tried to import the style as global css file via nuxt.config.js. Did not help.

I could just overwrite the CSS property separately, but i want to do it the right way.

Can you help me?

Update to Vue3?

Hi there,

The newest version of vue is finally here
And I would like to know if there will be an update to this repo for the new version of vue.

Missing icons

The bell-cog and bell-cog-outline icons appear to be missing (amongst many others).

@robcresswell, would you be able to update the @mdi/js dependency to the newest version (6.7.96 as of today) and release a new version of the package? That would be very much appreciated.

Can't import thin icon

Hello, I got an error that telling the icon is not found when I use thin material design icon, does this package not use the latest version of the material design icon?

Use outlined icons

Is there a way to grab outlined icons rather than ones filled in?

Switching to functional component broke my entire code base

Thank you for the amazing package though I thought this package was previously on GitLab.

Anyway I updated my entire dependencies vue-material-design-icons being on of them which broke my entire app because v-on:click.native that was working previously weirdly stopped working and after debugging I found out it was caused by the package using Functional component now.

I have corrected my bugs but I just want to make it known here too because I believe it should be labeled as breaking changes in the future.

Thank you for the amazing work once more.

Build broke with 4.13.0 (sorry, this is a weird report)

I know this is unhelpful and annoying, but... my build broke with 4.13.0. And all I know for sure is that 4.12.1 fixes it.

My large and unrelated application that is not a simple test app (sorry!) silently fails to produce a webpack output js file when using 4.13.0. webpack claims success, but... the file does not exist.

How could this be your fault? I surely don't know! I looked at the differences between 4.12.1 and 4.13.0 and I was not enlightened.

So I'd be very "uh... not my bug" if I were you, but if this turns out to be the first bug report of many then perhaps something is odd after all.

The good news is, the project that falls over is at least open source, and I can answer questions about the rest of its webpack config and so on.

This procedure will reproduce the issue:

# WORKS FINE, with 4.12.1
git clone https://github.com/apostrophecms/a3-demo
cd a3-demo
npm install
npm install [email protected]
NODE_ENV=production node app @apostrophecms/asset:build

# BUT THEN BLOWS UP, with 4.13.0
npm install [email protected]
NODE_ENV=production node app @apostrophecms/asset:build

(You'll get an error that apos-build.js does not exist, even though it's the configured output file of the build)

I found the module responsible by trial and error.

(I structured the reproduction instructions above so that they should still succeed and fail in that order even after we temporarily pin our dependency to 4.12.1.)

We're currently pinned on webpack 5.44.x, but I tried latest with the same result.

Thanks for your time.

[Vue 3] warning (deprecation COMPILER_V_BIND_OBJECT_ORDER)

I am migrating my project from Vue2 to Vue3. Everything went successful. The only thing that I am getting as a warning is from this library.

 warning  in ./node_modules/vue-material-design-icons/InformationOutline.vue?vue&type=template&id=456649a2

Module Warning (from ./node_modules/@vue/cli-service/node_modules/vue-loader/dist/templateLoader.js):
(Emitted value instead of an instance of Error) (deprecation COMPILER_V_BIND_OBJECT_ORDER) v-bind="obj" usage is now order sensitive and behaves like JavaScript object spread: it will now overwrite an existing non-mergeable attri
bute that appears before v-bind in the case of conflict. To retain 2.x behavior, move v-bind to make it the first attribute. You can also suppress this warning if the usage is intended.

The solution seems easy, just move the v-bind='$attrs' in the template as a first argument and this warning will be fixed

Regards
Nik

How to use it as class name?

Hi,

How i can use material design icons to use as class name, like:

mdi mdi-delete

Can anyone help me?

Thanks.

Missing Cogs icons

I noticed there are no cogs icons are found in the package, I mean some or maybe all of the icons that have cog in their name for example:

import Cog from "vue-material-design-icons/Cog";
import CogOutline from "vue-material-design-icons/CogOutline";
import AccountCog from "vue-material-design-icons/AccountCog";

Project status

This is probably the most annoying issue an open source maintainer could get, so my apologies for my question. What's the status of the project? Several issues and pr's are not picked up it seems, so it looks like the project is being abandoned.

Enhance documentation with style alternatives

The documentation just say that is optional to import the CSS file but doesn't offer a good option to that.

Error when build in docker or gh action `[vite]: Rollup failed to resolve import "vue-material-design-icons/ToolBox.vue" from "/app/src/components/LabelIcon.vue".`

When I build my project (do vite build), it failed by cannot import the icon.
But it works well on my host, idk why

Error Log:

 > [build 6/6] RUN --mount=type=cache,target=/root/.npm  npm run build:                                                                                     
#13 0.326                                                                                                                                                   
#13 0.326 > [email protected] build                                                                                                                         
#13 0.326 > vite build                                                                                                                                      
#13 0.326 
#13 0.724 build production
#13 0.759 vite v4.1.4 building for production...
#13 0.810 transforming...
#13 1.700 ✓ 158 modules transformed.
#13 1.701 [vite]: Rollup failed to resolve import "vue-material-design-icons/ToolBox.vue" from "/app/src/components/LabelIcon.vue".
#13 1.701 This is most likely unintended because it can break your application at runtime.
#13 1.701 If you do want to externalize this module explicitly add it to
#13 1.701 `build.rollupOptions.external`
#13 1.702 error during build:
#13 1.702 Error: [vite]: Rollup failed to resolve import "vue-material-design-icons/ToolBox.vue" from "/app/src/components/LabelIcon.vue".
#13 1.702 This is most likely unintended because it can break your application at runtime.
#13 1.702 If you do want to externalize this module explicitly add it to
#13 1.702 `build.rollupOptions.external`
#13 1.702     at onRollupWarning (file:///app/node_modules/vite/dist/node/chunks/dep-ca21228b.js:44792:19)
#13 1.702     at onwarn (file:///app/node_modules/vite/dist/node/chunks/dep-ca21228b.js:44562:13)
#13 1.702     at Object.onwarn (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:24950:13)
#13 1.702     at ModuleLoader.handleInvalidResolvedId (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:23632:26)
#13 1.702     at file:///app/node_modules/rollup/dist/es/shared/node-entry.js:23592:26

package.json

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build_dev": "vite build --mode development --debug true",
    "build_watch": "vite build --mode development --debug true --watch true --clearScreen false",
    "preview": "vite build && vite preview",
    "server": "node ./server"
  },
  "dependencies": {
    "@jridgewell/sourcemap-codec": "^1.4.15",
    "@mdi/svg": "^7.1.96",
    "axios": "^1.3.4",
    "compression": "^1.7.4",
    "express": "^4.18.2",
    "github-markdown-css": "^5.2.0",
    "vite-plugin-ssr": "^0.4.126",
    "vue": "^3.2.47",
    "vue-cookies": "^1.8.3",
    "vue-gtag": "^2.0.1",
    "vue-i18n": "^9.2.2",
    "vue-material-design-icons": "^5.2.0",
    "vue-request": "^2.0.0-rc.4",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "vite": "^4.1.4"
  }
}

Title conflicts

Let's look at the following snippet:

<button title="My title">
  <settings-icon />
</button>

What happens once the user hovers over the button is that the default icon overrides the button title. The current workarounds are

<button title="Open settings">
  <settings-icon title="Open settings" /> <!-- oof, very repetetive, or -->
  <settings-icon :title="false" /> <--! oof, very strange -->
</button>

...both aren't that great. Two alternative ways would be:

• a global way to disable titles
• title inheritance by traversing through the DOM parents

// accidentaly

// accidentaly

The automated release is failing 🚨

🚨 The automated release from the dev branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the dev branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Vue3 issue

Hello,
I followed exactly what is described in the README and I have this error in the console:

Uncaught (in promise) TypeError: Cannot read property 'decorative' of undefined
    at Proxy.render (Menu.vue?8aa8:2)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)
    at patch (runtime-core.esm-bundler.js?5c40:3712)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3894)

Multi Import

Hi! Thanks for making this.

I might be missing something, but when I need 10+ icons, the imports get pretty redonkulous. Your readme talks about aliasing things in the webpack config, but could it possibly work like other icon libraries where you can import multiple components at once from a folder?

i.e.
import { BeakerIcon, Cog6ToothIcon, HamburgerIcon } from '@heroicons/vue/24/solid';

When title is missing, should aria-hidden be "false" or default?

Currently, this library sets the aria-hidden attribute based on whether or not title is falsy.

vue-material-design-icons/build.ts

Lines 15 to 16 in 4b79bae

	:aria-hidden="!title"
	:aria-label="title"

In the change between Vue2 and Vue3, the default behavior for v-bind attributes with the value false changed. Specifically:

BREAKING: No longer removes attribute if the value is boolean false. Instead, it's set as attr="false". To remove the attribute, use null or undefined.

This leads to a subtle change in behavior in this package. Instead of omitting aria-hidden when title is unset, it will include aria-hidden="false". According to MDN, here are the different settings:

false
The element is exposed to the accessibility API as if it was rendered.

true
The element is hidden from the accessibility API.

undefined (default)
The element's hidden state is determined by the user agent based on whether it is rendered.

I'm no expert in accessibility, but it seems like the default behavior would be more desirable. That way non-rendered icons won't be read by screen readers.

I'll put up a PR in case you also think we should change this.

P.S., I found this because it was causing a lot of noise as warnings on a migration build of Vue, so changing this will improve the migration experience a bit.

Missing featured_play_list

Looks like the icon featured_play_list is not available, it's the only icon I really need!

Sizing doesn't do anything

Applying :size="48" makes no difference, as does

.material-design-icon.icon-2x {
  height: 2em;
  width: 2em;
}
 
.material-design-icon.icon-2x > .material-design-icon__svg {
  height: 2em;
  width: 2em;
}

Using dev tools shows this class settings the size to 1rem:

.material-design-icon > .material-design-icon__svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
  position: absolute;
  bottom: -0.125em;
}

What gives?

Exemple usage with Nuxt.js

Hi, Sorry for this stupid question, but I need to include icons as vue components and your library looks very nice. Can you give me an example of the correct use of this in NUXT project?

Error on Jest transformation

Hello,
Thank for you module but on our side we encouring an error.

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /node_modules/vue-material-design-icons/ArrowDown.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token '<'

Is some one already got this type of problem?

Thank you for the help.

Dynamic usage

I would like to render icons dynamically. I tried v-html but it won't work because the icons are vue components and not simple HTML. I think something like the following would be great.

<icon icon="menu" />

Something like bootsrap-vue's implementation would be great. Note that they require the individual icon to be imported for this method to work.

Property :size is not working correctly

Property :size is not working because of width and height of .material-desig-cion > material-design-icon__svg.

How to pass additional css classes (tailwind) to vue-mdi component

Hi,

I am using Vue + TailwindCSS and I want to style a mdi component.
How can I pass additional values to the components class to use TailwindCSS to style the mdi component?

Example:

<script lang="ts">
  import { defineComponent } from "vue";
  import ChevronLeft from "vue-material-design-icons/ChevronLeft.vue";

  export default defineComponent({
    name: "test",
    components: { ChevronLeft, ChevronRight },
  });
</script>

<template>
  <ChevronLeft class="bg-white border-none" title="left" />
</template>

Rendered in the browser:

<span
  aria-hidden="false"
  aria-label="left"
  class="bg-white border-none material-design-icon chevron-left-icon bg-white border-none"
  role="img"
  ><svg
    fill="currentColor"
    class="material-design-icon__svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z">
      <title>left</title>
    </path>
  </svg></span
>

Am I doing something wrong or is that not possible at all?

The automated release is failing 🚨

🚨 The automated release from the dev branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the dev branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch dev on remote Git repository with URL https://[secure]@github.com/robcresswell/vue-material-design-icons.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

[Vue 3] click event fires twice

when using Vue 3 and because Vue 3 changed the way that events passed to a component.
see Fallthrough Doc

you will face a click event fires twice when you use it like this
<menu-icon @click="someFunc" />
in this case, someFunc will always run twice

the reason for this is the @click in the lib components definitions.

for Vue 3 this @click here <span @click="$emit('click', $event)"> should be removed
and Vue will handle the events automatically
or perhaps the attribute inheritAttrs: false should be used instead for the compatibility with Vue 2

Missing mdi-account-convert-outline icon

Missing icons?

Hello,

maybe I miss something relevant but I was not able to find the TriangleDown icon. In the https://materialdesignicons.com/ this exists as a 180 degree rotated version but I cannot find it in this repo.

Do I miss a trick to rotate it or was it simply overlooked? I have not checked for other missing icons.

Thanks

TypeScript support

It would be very beneficial to add TypeScript support via a declaration file. I'm currently working on a TypeScript-based Vue.js application. Personally, I feel much more comfortable with TS than with simple JS and I believe I can also support other application developers when they think about using this shared component library.

v4 - @click events seem to be broken

I've created unit tests to demonstrate the example.

• Working unit test in v3.4.0: #48
• The same unit test fails in v4.0.0: #47

For a real-life project, see Illyism/musicplayer#79

• v3.4.0 https://musicplayer-io.netlify.com/
• v4.0.0 https://deploy-preview-79--musicplayer-io.netlify.com
• Eg The prev / play / next icons no longer accept @click events
• Used in this wage https://github.com/Illyism/musicplayer/blob/master/src/modules/player/VideoOverlay.vue#L69