templarian/materialdesign-js

Dist for Material Design Icons JS/TypeScript

Hi, I am Austin

Probably working on icons or something related to icons. If you're ever in Chicago feel free to reach out for tea 🍵 / beer 🍺.

Co-run Pictogrammers with some amazing designers and developers.

Topics I Enjoy

• ✒ Icons (obviously)
• 🧩 Web Components
• 📃 TypeScript
• 📄 Documentation
• 🤔 Unit Testing!

Contact me on Mastodon @templarian. Unless it's about something I maintain, then maybe create an issue 😉.

materialdesign-js's Issues

ESM Exports?

Feature Request: ESM Exports.

I use Vite for front-end tooling and without ESM exports the whole library is sent to the browser.

Missing icon: view-column-outline

The webpage example says to use the following string to import the above mentioned icon.

import { mdiViewColumnOutline } from '@mdi/js';

However, it does not exist in the repository.

Missing icons

I'm getting errors that this one no longer exists as of 5.0.45
mdi-text-box-multiple-outline

Looking at the mdi.js file confirms that

Add "exports" in package.json ESM build

Feel free to use https://github.com/userquin/mdi-js-es here, if so, I'll deprecate my package/repo.

mdi.js is not a valid node js file

mdi.js uses the ESM export style, but has a .js file extension instead of .mjs, which prevents node from understanding the file type. mdi.js should be mdi.mjs, and a new mdi.js file should be included that uses the CJS style. This appears to exist in the git repo, but isn't actually distributed for some reason.

Break mdi/react : Error: <path> attribute d: Expected number, "mdi-power".

The last release (v3.5.94) break the lib mdi/react. It's fine with the previous one (v3.4.93)
I've got following error for each icon in the console :
Error: attribute d: Expected number, "mdi-power".

Tell me if you need a repro. ;)

Bug: Could not resolve "prop-types"

❯ yarn dev
yarn run v1.22.17
$ pm2-dev ./pm2.config.js  --env development
===============================================================================
--- PM2 development mode ------------------------------------------------------
Apps started         : Remix,Tailwind CSS,Cloudflare Wrangler
Processes started    : 3
Watch and Restart    : Enabled
Ignored folder       : node_modules
===============================================================================
Remix-0  | Watching Remix app in development mode...
Remix-0  |  > node_modules/@mdi/react/Icon.js:1:965: error: Could not resolve "prop-types" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
Remix-0  |     1 │ ...ion(e,t){e.exports=require("prop-types")},function(e,t){e.exports=...
Remix-0  |       ╵                               ~~~~~~~~~~~~
Remix-0  | 
Remix-0  | Build failed with 1 error:
Remix-0  | node_modules/@mdi/react/Icon.js:1:965: error: Could not resolve "prop-types" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
Remix-0  | 💿 Built in 181ms

even after i install prop-types manually, it still cannot work properly.

using latest version of:

• @mdi/js
• @mdi/react

missing icons mdiTrayArrowDown mdiTrayArrowUp

Missing 2 icons:
tray-arrow-down = tray-download = mdiTrayArrowDown
tray-arrow-up = tray-upload = mdiTrayArrowUp

Uncaught ReferenceError: mdiAccount is not defined at <anonymous>:1:13

npm install @mdi/js
has already install,
this is src/main.js
import { mdiAccount } from '@mdi/js'
do console.log(mdiAccount),it showns that.
why this?

Auto Import icons

I'm using a bunch of MDI icons in my project.

So firstly. I've imported all icons. Now I want to reduce size of the bundle by importing only used icons.
Is there any way to import them automatically ?

Feature Request: Export the SVG Element Itself

Problem

Using this library to import icons doesn't feel natural. I would expect when importing an icon that it could be used as imported. However, it's quite a burden to always have to create the parent SVG element and its children to be able to use the imported data.

import { ABTesting } from '@mdi/js';

return (
  <svg ...allSVGAttributes>
    <path ...pathAttributes d={ABTesting} />
  </svg>
)

While this isn't particularly an issue when bringing this library into a component library which exposes an Icon component, it makes using the library outside of that settings very burdensome.

Request

I would love to be able to import the icons and already have the SVG element with its viewBox and other properties already set to ensure ease of use.

import { ABTesting } from '@mdi/js';

return (
  {ABTesting}
)

Outside of creating a React/Framework Icon component, is there a way to achieve getting these icons with the svg and path attributes?

Missing mdiDiscord

I'm facing with error No matching export in "node_modules/@mdi/js/mdi.js" for import "mdiDiscord"

mdi.d.ts

How to use it without node

I installed the module as:

npm install @mdi/js

And want to use it in my template that is running in a server built with GO lang, so i wrote the below:

<script type="module" src="./node_modules/@mdi/js/mdi.js"></script>

Bob lives in a <span class="mdi mdi-home"></span>.

But no icon shown up!

I even failed with

<script>
     import { mdi-home } from './node_modules/@mdi/js/mdi.js';
<script>

Missing icon: snowmobile

Hello! The icon exists on the website but is missing from the library.

This is the usage example from the website:
import { mdiSnowmobile } from '@mdi/js';

Icons missing in package

Hello, it seems icons are missing on package.
I can't find the mdiBriefcaseArrowLeftRight and others briefcase with arrow in the mdi.js file.

Can you fix it please ?

Thanks in advance.

Vincent.

No icons on the website

Icons are not shown on the website.

missing icon mdiPrinterOutline

printer-outline = mdiPrinterOutline

Getting error <path> attribute d: Expected move to path command ('M' or 'm'), "pencil"

Some of the icons are generating errors such as:

Error: <path> attribute d: Expected move to path command ('M' or 'm'), "pencil".
set @ innersvg.js:78

credit-card-outline, bank and a few others are showing similar errors.

The pack doesn't contain all the icons.

The pack doesn't contain all the icons.
For example, I look at https://materialdesignicons.com/ mdiCogOutline is present, but it is not in the package.

Question dynamic import treeshaking

Hello I have the following code to dynamically import the icon. Only problem is, it doesn't treeshake. Is there a way to make dynamic import treeshaking?

@mdi/js out of sync with materialdesngicons.com

Hi, one of my peers recently noticed that materialdesignicons.com does have some icons, which are not contained inside the icon lib I maintain. After a quick look, I realized that @mdi/js was published almost a month ago.
Could you make an update?

missing pdf icon

i not found .mdi-file-pdf (with acrobat logo) on last release why? can u please reput this icon?

Applying spin and sizing

Previously I used Vuetify and inserted an icon like

<v-icon>loading mdi-spin mdi-36px</v-icon

Now I'm using this library and doing

import { mdiLoading } from '@mdi/js';

The icon itself is working just fine.

Is it possible to attach the spin and size modifications when using the icons in this way?

Thank you

The "mdiDeleteClockOutline" icon is pressed to the right edge

The "mdiDeleteClockOutline" icon is pressed to the right edge and downwards. Why isn't it centered like other icons?

Create separate icon files

Is it an idea to create separate icon files, so that we can just import the icons that we need? https://github.com/Templarian/MaterialDesign-JS/blob/8ecadec56d85820a8912bd9801aba85c5acc2e81/mdi.js is currently 1.44MB in size. I feel bad about including the whole file in my bundle, just to use a few icons.

import Icon from '@mdi/react';
- import { mdiAccount } from '@mdi/js';
+ import AccountPath from '@mdi/js/Account';

mdiDotsCircle isn't in the package

I've tried to use mdiDotsCircle icon, but getting an error

The icon is available for download, but not in the package.