To match font-awesome features I would add the possibility to spin icons to _extras.scss file. Something like the following

.mdi-spin:before {
  -webkit-animation: mdi-spin 2s infinite linear;
  animation: mdi-spin 2s infinite linear;
}

@-webkit-keyframes mdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes mdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

Hello, I'm getting this error with webpack after last update

ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/materialdesignicons-webfont.svg?v=3.7.94' in '/app/node_modules/@mdi/font/css'

Hello,

I'm using the icons for a text editor right now, and it would be lovely if there was an 'unlink' icon - something along the lines of the link-variant with a slash going through it?

That would be awesome, thanks!

On the homepage it says that there's an icon named voice but when using the style mdi mdi-voice it doesn't appear and when looking through the css it doesn't even exist.

I think all code in _extras.scss should be applied to :before but it wasn't updated to it when the icons were changed to be used on :before.

At least I tried the flip and rotate thing and they don't seem to work unless applied to :before.

Both source maps (minified and non-minified) refer to the scss sources as dist/scss/*. This isn't correct, as there's no dist folder. I was previously using v3.7.95, which worked correctly and used ../scss/* as the sources path in the source maps.

The bower description says, that this package contains also the community created icons, but it doesn't.

EDIT: Sorry, I probably just tried one, that could have been submitted recently (folder-edit). Feel free to close the issue.

Hey @Templarian! Big fans of your MDI icon library here. However we have some issues with the versioning of this module. Mainly, there is no way for us to verify consistency from one version to another. Recently we upgraded MDI versions, and a customer noticed that one of our icons had disappeared, rendering the button useless. We realized afterwards that the icon name had changed in a version update.

Our request is mainly that if there are breaking changes to existing icon names, there's a place for us to see those changes and correct them before we push changes (without having to go through line by line on your commits).

Also, if you can have some sort of rules about when you release breaking changes (e.g. major version changes) it would be easier for us to manage. In another example your update from v1.7.22 to v1.8.36 completely deleted an icon called "mdi-appnet".

If this already exists somewhere, please let me know! Thanks

The "cog" icons and its variants are named "settings" in this package.

Took me a while to understand why my mdi-cog icon was not showing up.

From the bower.json spec:

[...] Only one file per filetype.

[...]

Image and font files may be used or referenced within the JS or Sass files, but are not main files as they are not entry-points.

• Use source files with module exports and imports over pre-built distribution files.
• Do not include minified files.
• Do not include assets files like images, fonts, audio, or video.
• Filenames should not be versioned (Bad: package.1.1.0.js; Good: package.js).
• Globs like js/*.js are not allowed

Because of this with your current configuration wiredep always includes the normal an the minfied css file.

So the main section should only include the css file:

"main": [
    "css/materialdesignicons.css",
]

Using this webfont with the latest PyScss v1.3.5 (released today), causes breakage. Honestly not sure if the breakage is on the side of PyScss or this package, any direction would be greatly appreciated.

Before the upgrade: https://i.imgur.com/0D0x5Bs.png
After the upgrade: https://i.imgur.com/ZDvWlai.png

A blank icon appears...

.mdi-account-alert-outline::before {
content: "\FB2C";
}

The file-account icon is missing in 1.8.36. This is reflected in both the css and font files

In 1.9.32, materialdesignicons.scss wants to imports _animated.scss (@animated), but it does not exist.

Should it be there, or should the import be removed?

It would be nice to have the license explicitly specified in the README, just in case there are any issues with the usage of this font.

Hi guys! This best project.
i think, best practical if add font-display: swap; in ./@mdi/font/scss/_path.scss

@font-face {
  ...
  ...
  font-display: swap;
}

Google recommended :-)
https://developers.google.com/web/updates/2016/02/font-display

Please add mdi.svg to bower

Started using this collection and I've noticed that all the <i> elements for each icon have some type of extra whitespace, more noticeable on top/bottom, but the ::before itself has the correct height of the icon. I haven't found a way of removing this with CSS.

Is this a breaking change?

mdi-sort-alphabetical-ascending which should resolve to this icon
resolves to this icon. This can be seen when using appropriate css class to try to resolve for the icon.

Other sort related icons are also missing including but not limited to:

• sort-bool-ascending
• sort-bool-descending
• sort-bool-ascending-variant
• sort-bool-descending-variant
• sort-alphabetical-ascending-variant
• sort-alphabetical-descending-variant

Simplistic icons, which are mostly "on pixel", do not require many decimal places for path points. Thus, SVGs can be optimized a lot (up to 3 decimal places for fine details, and none for on-pixel points).

If I look at the resulting SVG font here however, there are a lot of values with 13 (!) decimal places. Doesn't seem right to me.

Right now the main website (materialdesignicons.com) has a few icons described that are not yet in this webfont (mdi-circle, etc) which is a bit annoying.

Can you add instructions how to build the font files from the raw svg files?

Hello @Templarian ,

I was wondering about a couple of things.

1. (removed part as the issue was not related to this library)
2. would it be possible to have an alternate _variables.scss fiel where the original google icons have the original (or better "hypenated") google name?

kind regards,
maks

Tried replacing Google's WOFF and WOFF2 files with yours and started getting user reports of all the icons disappearing. I was unable to reproduce on Firefox and Chrome, but could on Safari. Other users reported problems on all browsers.

Using https://fontdrop.info/ I was unable to see ligatures (Google's font files worked fine) when typing on the "Waterfall" tab.

It's in the SVG repo, but not included in the Sass file.

The credit-card-wireless icon is shown on Material Design Icons website and you can find it, but in the @mdi/font repo is missing, accordin to mdi css file.

Some icons like:

• account-arrow-left
• account-arrow-left-outline
• account-arrow-right
• account-arrow-right-outline
  that are visible in website, which address version 2.8.94, are not present in same npm version.

Sass is throwing the following error when using an icon that's not in the registry.

C:\Users\moogblob\project_xx\src\styles\main.css:11766:9559: Unclosed quote
    font-family: "Material Design Icons";
    content: "\"; }

SCSS:

font-family: "Material Design Icons";
content: mdi('some_odd_iconname');

mdi version: 1.7.22
OS: Windows 8.1
libsass: 3.3.2

I have got an error in my project:

Error in plugin 'sass'
Message:
    node_modules/mdi/scss/materialdesignicons.scss
  6:9  file to import not found or unreadable: extras

Hi,

The TTF and EOT version of the font are huge and not really need with modern browsers / mobile platform. Can you add a alternate version of your css without it ? It's will reduce bundle size of lot of people.

Cheers,

The demo on https://materialdesignicons.com/ (supposedly in 3.5.95) lists pdf-box and file-pdf-outline as available. However, neither are to be found in https://github.com/Templarian/MaterialDesign-Webfont/blob/v3.5.95/css/materialdesignicons.css

pdf-box was apparently added in February according to Templarian/MaterialDesign#1339 but it is unclear if it was for 3.5.xx or 3.6.xx

Thank you for clarifying this.

What about having the original material icons' names added as aliases?
ex. more_vert => mdi-more-vert

I noticed you are using a list of names and font codes to generate the pseudo elements' content map.
In many occasions i found useful to have sass variables referring to unicode characters so they can be used in other scss files.

ex. $mdi-var-more-vert: '\e5d4'; for the original material design icons

even if your solution saves a lot of space, with a simple script (i used php) a variables file and a pseudo elements icon map file could be generated and this would help with code hinting when using scss variable names.

kind regards

Hello @Templarian , thank you for your update, also i just started using mdi inside my css with my mixins. (for example i am adding magnify icon to input box via :after pseudo selector). My problem is that i created this class

&:after {
  content     : "\f3ab";
  @extend .mdi-icon;
}

But problems is , that when you upgraded to new version your HEX-codes was changed, so every icon in my application stopped working :) . It is possible to generate inside your _icons.scss file variable for each icon so it would be like

$mdi-account : "\f101";

after this i can include your _icons.css file and only call and my build will not be broken after each upgrade? Also same approach has Font-Awesome icon set inside sass files. When i look to your _icons.scss it looks like generated file, so i think it would not be big deal add another loop to generate named variables for hexes. Thanks.

&:after {
  content     :  $mdi-account;
  @extend .mdi-icon;
}

Latest version on npm is 2.2.43
https://www.npmjs.com/package/mdi

When "atom" icon will be included in webfonts?

v1.8.36's meta.json file had some interesting attributes (author, version, tags) that are missing from v1.9.32's meta.json.

I'm using all of these (except tags for now, but I'm implementing it) in the MaterialDesignIcons-Picker. Would it be possible to add them back?
I'd like to avoid releasing a new version without these tags

Thank you!

Does it possible to move svg font files to another undependent repo? It's rarely used(Only for iOS <= 4.x ?), but take 2x space than all other fonts.

svg size: 3.88M
eot + woff  + woff2 + ttf size: 1.43M

Releated info:

There's technically another container format, the SVG font container, but IE and Firefox never supported it, and it is now deprecated in Chrome.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

SVG Font (deprecated)

https://www.w3.org/TR/css-fonts/#font-face-src-format-types

Hi! I've seen on Issue #4166 that the SVG Font has been removed from the project.
That font was REALLY helpful to us in our workflow.

We used it on Sketch along with the "Sketch Icon" plugin.
There we could import a custom SVG font and use all of the icons directly on the Sketch File, using the plugin to find the desired icon.

Last week we wanted to update to the latest version but it was not possible since the SVG font is not available anymore.

Hi there,

I am wondering if we could load the file from local first in order to improve the preloading.

in the @ font-face

@ font-face {
font-family: "Material Design Icons";
src: local("Material Design Icons") url("../fonts/materialdesignicons-webfont.eot?v=4.8.95");
src: local("Material Design Icons") url("../fonts/materialdesignicons-webfont.eot?#iefix&v=4.8.95") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=4.8.95") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=4.8.95") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=4.8.95") format("truetype");
font-weight: normal;
font-style: normal;
}

like this?

This is recommended as the PWA performance improvements

Hello!

I just have a few questions regarding the license references:

1. In "package.json" and "bower.json" files besides the OFL-1.1 License, the MIT License is also mentioned. Can you please tell me on which files does the MIT apply?

2. In the "license.md" there is a Google copyright from 2014. From the link provided ( https://github.com/google/material-design-icons/blob/master/LICENSE) there were 2 versions released in 2014 with different license terms (1.0.0 - Attribution-ShareAlike 4.0 International license and 1.0.1 - Attribution 4.0 International license). I would appreciate if you could tell me which files are from Google and which version did you use.

Thanks.

On https://materialdesignicons.com/icon/weather-partly-cloudy declared as "weather-partly-cloudy"

But on scss declaration _variables.scss @ line:3689

...
"weather-partlycloudy": F595,
...

The "-" is missing on SCSS class mapping.

woff2 should be supported by most devices/browsers. It would be an idea to move them to a separate package instead, although removing support would be a better option:

fonts/vendor/@mdi/materialdesignicons-webfont.eot?be7691c114e7c9d0543b89e824c4003d   534 KiB          [emitted]  [big]  
fonts/vendor/@mdi/materialdesignicons-webfont.svg?c68a0a65b3a0be718f4c81c02c5f69ca     4 MiB          [emitted]  [big]  
fonts/vendor/@mdi/materialdesignicons-webfont.ttf?6acc7d6cffa21f6eda4baaa90e835fd2   534 KiB          [emitted]  [big]  
fonts/vendor/@mdi/materialdesignicons-webfont.woff2?84c6fe1e4353c916d8f1452e82bdef8d   189 KiB          [emitted]         
fonts/vendor/@mdi/materialdesignicons-webfont.woff?1a95531b09ffc9b76104e0003b456a0e   257 KiB          [emitted]  [big]

If this should be in the main repo, please let me know. :)

The border-color icon is not centered, which is problematic when using it with other icons, it is not aligned.

I see the problem on the png versions too

Hey there,

Our company has been trying to use this package within the Ruby on Rails framework (through its 'Asset Pipeline', which is powered by Sprockets). We've found that, at the moment, the way the font files in this package are sourced with the relative path in src: url() causes Sprockets to be unable to trace the font files properly as dependencies, so they don't get included in the asset precompilation process (and consequently don't show up when we deploy on our production servers).

I wasn't able to find an easy way to update this webfont package itself to fix the issue without refactoring the whole way the files are stored (see the 'Long-term solution' section) . However I did find a temporary workaround:

Rails temporary workaround

• writing a custom Rails-centric copy of _path.scss (see below)
• using a custom index file that imports everything except _path from mdi like in the scss/materialdesignicons.scss, and then our custom _path file instead.

Here's whats in that custom _path.scss file. asset_path() is the Sprockets helper method for locating an asset file.

// This file has been copied from mdi and modified as outlined below. Using the
// package default version of this _path.scss file causes path resolution
// issues, especially in Production.
//
// Modifications:
//
// * "?v=" query string has been removed from the paths in url() directives, as
//   Sprockets handles versioning itself with asset fingerprinting
// * url() directives have also been updated to use sprocket's asset_helper
//   with an explicit basename for reaching into the mdi package. This makes
//   sure that Sprockets can find and work with all the font files properly,
//   and that it will pick up the font files as dependencies when precompiling
//   assets

@font-face {
  font-family: '#{$mdi-font-name}';
  src: url(asset_path('mdi/fonts/#{$mdi-filename}-webfont.eot'));
  src: url(asset_path('mdi/fonts/#{$mdi-filename}-webfont.eot?#iefix')) format('embedded-opentype'),
       url(asset_path('mdi/fonts/#{$mdi-filename}-webfont.woff2')) format('woff2'),
       url(asset_path('mdi/fonts/#{$mdi-filename}-webfont.woff')) format('woff'),
       url(asset_path('mdi/fonts/#{$mdi-filename}-webfont.ttf')) format('truetype'),
       url(asset_path('mdi/fonts/#{$mdi-filename}-webfont.svg##{$mdi-filename}#{$mdi-font-weight}')) format('svg');
  font-weight: normal;
  font-style: normal;
}

Long-term solution

I did also look into modifying this webfont package to support Sprockets - you can see a WIP approach to it here: master...captur3d:sprockets-port . The main problem is that I couldn't get it to work without refactoring the whole folder tree to follow a more Sprockets-friendly layout.

My reference for implementing Sprockets support was the bootstrap-sass package. If you look in bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss, you can see that they define a boolean flag variable and two path-finder functions that wrap calling the corresponding helpers in Sprockets. Then in bootstrap-sass/assets/stylesheets/bootstrap/_glyphicons.scss, there's an if check for the boolean flag that determines whether to use the asset helper methods, or whether to just use url() directly.

As alluded to earlier, the final problem I hit was that to make it to work properly entirely inside this webfont package (i.e. so we wouldn't need any custom code inside our Rails project), we'd need to add some kind of base mdi or materialdesignicons folder that everything else would live under, and probably also introduce the assets/stylesheets-style directory layout that would wrap that folder as well. Whilst adding the mdi/ prefix (like we did in our custom _path.scss file) works within Rails, it relies on that being the name of the package/the name of the folder that package is copied/checked out into, which is a bit flimsy. This package/repo itself will probably need its own mdi folder to make everything work properly.

Making this directory structure change seemed somewhat of a breaking change for non-Sprockets users, so I figured it would be better to just write all this up in case anyone else comes along to use this package in Rails, and mention it to the package author to see if it was worth taking any further. You may want to at least link to this issue from the README for Rails users? Similar to the Apache Cordova exception I spotted there already.

I think "materialdesignicons.css" should be "css/materialdesignicons.css" in .bower.json? I see the css has moved in release 0.9* could it be that this was forgotten?

When trying to use the TTF font in Internet Explorer 11, it throws an error:

@font-face failed OpenType embedding permission check. Permission must be Installable.

Setting the permission on the TTF font fixes the issue. This is necessary when using libraries like @expo/vector-icons that use a single file for all platforms

The 5.0.45 release of css fonts is missing icons like : flask-off or mushroom-off of the latest release.

I noticed something looked funny when loading the html file. I am using Chrome and W8.1.

Confusing versioning

Unfortunately I cant see through the versioning any more.

• What changes have been made between version 3.x and 4.x?
• Is there a changelog.md?
• Are there any breaking changes from 3 to 4?