zavoloklom / material-design-iconic-font

Material Design Iconic Font and CSS toolkit

Hi there 🖖

I'm Sergey, a developer from Berlin. I'm specializing in PHP, Node.js, React and CI/CD.

On this page, you'll find my projects and coding adventures. I'm open to collaboration and knowledge-sharing.

GitHub Stats

How to support

Around a decade ago, I was actively involved in the open-source projects related to Material Design, and now I'm ready to contribute to open source again.

You can support my efforts with a donation:

Contacts

material-design-iconic-font's Issues

Add scss variables

Hi,

First I'd like to thank you for your great work !

It would be great if you can provide scss/less variables for each icon.
We could use it with pseudo element.

$md-var-arrow-drop-up: '\f296';

.up-button:after {
    content: $md-var-arrow-drop-up;
}

Icon Request: shape

Hi Mr. Kupletsky,

I love material design iconic font, but I am missing a shape icon like:

It would be nice if you can add this

Best regards,
Dennis

New icons

Just saw that Google's pushed a bunch of new icons - is there an ETA on when these might be added to the font? Thanks!

Icon Request: format-halign-center

Hi Mr. Kupletsky,

I love material design iconic font, but I am missing the brother of format-valign-center the format-halign-center. It would be nice if you can add this.

Best regards,
Dennis

Icon request: social icons

Hi, i like your job but I need some social icons. Can you add these?
http://www.socicon.com/chart.php
thanks

Log out icon?

Forgive me if this icon already exists but I can't seem to find a suitable logout button in your font collection. Is there such an icon?

Thanks!

Could we add a woff2 font

Woff2 gives smaller file size would be good if this was included by default :)

Add a unicode cheat sheet

It would be nice if there was a unicode cheat sheet similar to FontAwesome. It makes using the font on desktop much more convenient.

Icon Request: rss

Hi Mr. Kupletsky,

I love material design iconic font, but I am missing an rss icon like:

It would be nice if you can add this

Best regards,
Dennis

Publish to npm

Npm support is desirable

Icon Request: group/ungroup

Hi Mr. Kupletsky,

I love material design iconic font, but I am missing a group and an ungroup icon like:

It would be nice if you can add this

Best regards,
Dennis

change default prefix to mdi

Could you please change default prefix to mdi instead of md ? because there is conflict with angular-material, or set variables configurable by adding !default so we can easily change the prefix:

$md-font-path: "../fonts" !default;
$md-css-prefix: md !default;
$md-version: "1.1.1";

$md-border-color: gray !default;

thanks a lot.

Icon Request: spinner

Hi Mr. Kupletsky,

I love material design iconic font, but I am missing a spinner icon like:

It would be nice if you can add this

Best regards,
Dennis

Make icons more pixel-perfect in 14px size

Fix icons for better view while using small sizes.

Angular Material compatibility

Many classes and directives use the prefix "md-", this causes to css of the Angular Material library to act strangely. Temporarily we have changed the prefix to "mdi-", where the "i" stands for icon.

md-lg offsets icon vertically in Safari

OSX Safari: (Shifted down)

OSX Chrome: (Looks correct)

Removing the vertical-align:-35% fixes the issue in Safari but unsurprisingly messes it up in Chrome..

Does "invert" icon exist?

Sometimes I would like to have icon with inverted color, for example md-report-problem but with white instead of black.

Could you please add this option?

Add App Window Title Icons

Please add the Chrome OS App Window Title Icons, by that I mean the minimize, maximize, close icons. Additionally it would be nice if you could add OS X versions of those same icons and the new full screen icon that was released with latest Windows 10 build.

I'm building a Chrome App for all platforms that uses a custom window chrome, so I need to render those icons on my own for all OS's.

Icon distorted, not rendered properly

Hi I am using the battery icons and I just noticed that the icons are a bit distorted. See below.
I use
<i class="md md-battery-60 md-lg"></i>

I played with the antializing settings and that seems to make it only worse. Is it the seed icon that has issues?

Add package to bower

At least until we have an official material design iconic font, it would be great to have this on bower.

More info: http://bower.io/docs/creating-packages/

Avoid wildcard selectors

Hello!

I'm developing a framework which uses md-* class names. It works flawlessy, if it wasn't that you use two generic selectors to get all md-* items. As you use a name templating similar to FontAwesome (fa fa-* -> md md-*), why are you using these selectors? Also, these selectors are slower than "precise" ones (and I suppose this is why fontawesome avoids wildcards).

The selectors are:

[class*=" md-"], [class^="md-"]

I'd probably resolve and request a pull if I wasn't at work.

Thanks

Is there any support - cheatsheet for the older-previous version of the icons?

It's seems like all the icons have been renamed and therefore while installing with bower the names are missing

Material Design Iconic and openlayers

Hi, How can I use yours icons with openlayers?
http://docs.openlayers.org/library/feature_styling.html

This sentence dont work
var s = new OpenLayers.Style({
'pointRadius': 10,
'externalGraphic': ''
});

Thank you
Regards

Meteor package from your repo

I've done a Meteor package from your font repo.

https://github.com/ixdi/material-design-iconic-font.git

Thanks!

icons in version 2.0.2 do not match the cheatsheet

When I copy the icons from the cheatsheet and paste them into my application the wrong icon appears.

Icon request: Language icon

For switching languages on app/sites;
See: http://www.languageicon.org/

sass variables should use !default for overriding

currently you have to edit the variables.scss file directly to change variables when including in a different sass project.

this can negated by simply adding !default after the variable declaration in the variables file which will allow sass to override it by defining the variable before importing the file:

in _variables.scss
$md-font-path: "../fonts" !default;

in another sass project
$md-font-path: "../fonts/icons";
@import "material-design-iconic-font";

Add icons labels at cheatsheet page.

Sometimes very hard to find icon, need to remember icon position at icons page....

Issues while using it with Material AngularJS

I am trying to use this material design iconic font in a project with Material Angular JS. Both Material Angular and material design iconic font elements having classes starting with "md-". But due to the way that this CSS is implemented, styles in this [class*=" md-"],[class^=md-] gets applied to Material Angular components too.

Kindly fix it to be compatible with that too.

Suggested fix:
Change your existing CSS to i[class_=" md-"], i[class^=md-] instead of [class_=" md-"],[class^=md-], as the icons are embedded using tag.

Thanks in advance.

icons names in version 2.0.0

Many icons names have changed in 2.0.0 but they are not (yet?) documented and they don't seem to match the names of the official Google icons. Example:

1.1.1	2.0.0	Google
create	edit	mode_edit
event	calendar	insert_invitation
settings-power	power-off-setting	settings-power

minify SVG

You definably don't need to propagate files with a comment like this inside your code:
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
I have other minification ideas.

Thanks for putting together your font!

where is md-work? :(

where did the briefcase icon go?

webpack threw an error Cannot resolve 'file' or 'directory'

I installed the font by "npm install material-design-iconic-font"，then import less file in my project, use webpack and less-loader compile css.
It threw an error "Cannot resolve 'file' or 'directory' ...", cause couldn't find font dir in root. I must copy the font dir from dist to root. It will be a problem when I publish my project.
Is there any other way to solve this ?

Broken icons

Some icons are broken, see attached screenshots

Font not icomoon ready

Hi!

It would be cool if you would include either a simple icon list (the current cheatsheet is showing strange symbols instead of icon names), or a json file with icon names so that it can be uploaded to icomoon (icomoon exports the icons and creates a cheatsheet for you).

For now if you upload svg to icomoon you get icons, but the names start with uniF codes, and that's not user friendly.

md-label icon conflicts with angular-material's md-checkbox

The md-label icon seems to be conflicting with angular-material's mdCheckbox (https://material.angularjs.org/#/demo/material.components.checkbox). I get an extra label icon from the material-design-iconic-font, which shouldn't be there (only the text label of the checkbox is supposed to be there in the screenshot).

Here is the screenshot:

Add md-fw option like fa-fw in font awesome

It would be really great to have a fixed-width class like with font awesome icons... it could be called 'md-fw'

Thank you in advance

Grunt build issues

Using grunt/yeoman/bower for an angular app using this, and this works great when I grunt serve, however when I ready for production and grunt build, and run the app.js in my dist folder - these fonts don't show up. Possible I'm missing something here, using this type of build is still new to me. Would appreciate any insight into getting these working, these icons are awesome!!

I know this is also addressed, but they are messing with my angular-material plugin as well.

Thanks!

change font folder to fonts

nuff said. :)

Pretty sure this is a standard naming schema. It is just semantics but having a font folder and a fonts folder drives me nuts!

Font size and line height

When changing font-size and line-height, icons height is 4px higher than supposed to be. Adding display: block; solves the problem, but it is impossible in some cases.

Normal text behavior

Icon behavior

Social section doesn't show up when adblock is on

I am using Adgaurd AdBlocker and was using the cheatsheet page to copy icons into photoshop. Noticed the social section isn't there at all. Turned off adblock and it appeared.

Might want to add a note (unless there already is one I didn't see) to turn off adblock on this page.

Wifi icons whitespace is not aligned

See attached image

Feature request: Include Community Icons

It would be nice if additional community icons also become part of this package:
http://materialdesignicons.com/

And also other essential icons like youtube-play for example:
http://materialdesignicons.com/icon/youtube-play

Class name

Such construction causes problems using with Angular, where most class names start with "md-"

[class^="md-"],
[class*=" md-"] {
   ...
}

Better implement class names like ".md .md-icon" and declare main styles for ".md" class name

Sizes in variables

I like to have the basic size in a variable. Now I have to give all my icons the zmd-lg class. If the base font size in a variable I could just set it to the @font-size-base of bootstrap and the icons would be the same height as the rest of the bootstrap app..

"!default" not used properly in version 2.0.0

From the Changelog of release 2.0.0:

add "!default" to sass variables;

However, !default is assigned to CSS declarations, not SASS variables. libsass doesn't like it.

See the SASS documentation.

Use nested pseudo classes for LESS

Hey,
It would be great to change the icon declarations for LESS to use nested pseudo classes, instead of
simply using them directly.
The problem is, I can't reuse them because of the pseudo class.

For example:

.my-icon:before:extend( .@{md-css-prefix}-check:before ) {}

This one won't work. However, if icons were defined this way:

.@{md-css-prefix}-check {
  &:before {
    content: "\e123";
  }
}

...and I reused that class without pseudo classes, everything would work.
What do you think, @zavoloklom? I'm able to send you an PR if you're fine.

bower.json defines all CSS files to be included

The bower.json defines dist/css/* as the main files. This causes grunt to include both the normal and the minified version.

Why did you rename all the icons?

I get the prefix change but why rename the icons from what Google named them?

I prefer your library over Google's because of their decision to use ligatures, but now you've added extra work to translate from Google's names to your own. I just don't see a good reason why you'd make this change.

Before I decide if I should remove or fork this library am I missing something?

Website: Icon categories are misplaced

Yo, just saw a small quirk on the website and figured I'd make a ticket. On the page http://zavoloklom.github.io/material-design-iconic-font/icons.html there are the different categories of icons, however somewhere in the middle it's placed as Directional and then Map, however in the side menu it's Map and then Directional which leads to the highlight jumping a bit all over the place when scrolling down