google / material-design-icons Goto Github PK

Would be great to have those.

Please add a child(kid) icon.

Similar to this request, but for 1d (linear) barcodes.

Hi,
Today one issue: wrong filenames for 3 icons from the editor/ folder:
Format textdirection l to r/functions/format textdirection r to l.

http://google.github.io/material-design-icons/ needs update too because of that.

PS: Great, comprehensive icons set. Thanks for sharing so much with the FOSS community!

The keyboard alt icon is a smiley face (same as mood, insert emoticon, etc.) and the timer auto icon is the same as person. I'm assuming these are just temporary icons until actual icons can be developed, but these icons don't really make sense in their current context.

See the hardware and image sections here: http://google.github.io/material-design-icons/.

Hello!
I'm working on my website, and I need a Youtube icon, but when I search in the icons, I don't see any Youtube icon... 😢
Could you create one, or give my the path if there's already any?
Thank you anyway!

Would be great to have those.

• mnification is helpful (whitespace removed)
• Prep for web usage; expect filename mangling (concocting, optimizers like CloudFlare)
  • Might be better to include IDs for individual icons & not just the sprite sheet.
  • Some sort of <!-- comment -->, meta, or description to insert author & copyright
    • helps source upgrades & bug reports if you know where the file came from
    • need license legal notification, epically when transferring business asses.

Usually I'm all about making files small as possible, but we're all used to having mininfied files having ID info & legal notifications in a header-comment. Easier to take out stuff we're certain we don't need later than trying to find and add it when it is too late.

I was thinking about tweaking your Gulp/Grunt config, but you haven't released it yet. ;)

This could be an issue with fontastic.me, but the settings svg appears corrupted.

I just downloaded the zip file. And it only has an "action" directory. It misses all other icons.

It's not beautiful without colors. How to make it colorful?

I think it would be better to invert the hierarchy:
1x_ios--------------->| action
1x_web                  | alert
2x_ios                    | av
2x_web                  | communication
3x_ios                    | content
drawable_hdpi       | device
drawable_mdpi      | editor
drawable_xdpi       | file
drawable_xxdpi      | hardware
drawable_xxxdpi    | image
svg                         | maps
LICENSE                | navigation
README.md          | notification
browser.json           | social
index.html               | sprites
package.json          | toggle

It occurred to me when, I was finding a way to just download all the svg icons.

• How to contribute?
• Any CLA material that needs signing
• Open an issue before working on PRs etc.

The zip file cannot be unzip.

The navigation drawer left-top corner has a avatar. It would better to provide a default icon (when user hasn't logged or uploaded its own avatar) .

This icon is 64dp (I can't find its size in Google Material Design spec, so I measured it but still not sure) and action -> account circle or default rounded avatar in Gmail/G+ may be a good choice.

QR codes scanning is a thing, so you know may be you can add it.

I thought it would be a good idea to add "Device Temperature" and "Weather" Icons to the mix. Thanks.

• ic_android_24px.svg isn't #000
• ic_android_48px.svg isn't #000
• ic_credit_card_24px.svg has a path filled with white
• ic_credit_card_48px.svg has a path filled with white
• ic_signal_wifi_statusbar_connected_no_internet_3_26x24px.svg has a path filled with white

You state that SVGs are included in the release, but the zip I downloaded has only pngs!

An icon font is being worked on at the moment and we're hoping to ship it sometime soon :)
This issue is mostly a placeholder to remind us to include it.

Some of the optimized SVGs are triggering librsvg bugs (Gnome SVG renderer which is used among many apps). Usually original AI exported SVGs or SVG designers like Inkscape know how to deal with such issues.

Just wanted to let you know if you like fix such issues.

I love the set and it would be great if you could add some sports related icons like:

• Standings
• Scores
• Bench / Replacements /Substitutians
• Starters
• Trades
• Sign Player
• Release Player
• Team / Roster
• Injuries
• Draft

Just some ideas :)

The Google Drive web interface uses an icon for "Sort Options." It would be great to see that icon added to the library.

It seems that the icons for textdirection are not correct. L-to-R is a sigma character and R-to-L is pointing the wrong way (L-to-R).

This is possibly an issue with fontastic.me, but these map icons seems to be corrupted.

Hi Josh,

I'm following up re the below issues because I have new information:

#32
#31
#30

I've been in touch with Fontastic.me's Vincent Le Moign, and his response to the issue is pasted below. He's also asked if I could put you in touch with him so you two can discuss a solution in-depth. Vincent's email is [email protected]. Feel free to CC me ([email protected]) if needed:

All the icons which cause problems have a transparent shape that you don’t normally see, but that cause a problem when you import it.
(as the shape really exists even if invisible)

For example, I’ve fixed the magnifier icon you mentioned, and you can see that it’s imported without problem with Fontastic below:

I’ve attached to this email the original magnifier icon, and the fixed one.

Have a look and try to import, you’ll see.

This is actually a classic problem, and I detail how to fix in the Fontastic FAQ: http://fontastic.me/faq

http://www.google.com/design/spec/animation/delightful-details.html#delightful-details-delightful-details

A few icons have transitions that are so common as to be ubiquitous, especially the menu/arrow transition. It would be nice if the animations were released under the same license as the core icons. Can this be included in your icon set?

Fontastic.me has trouble rendering this icon:

It's impossible to use two different sprites in the same file.
Could you rename "icon" to "icon-action" for "sprite-action-black.css", and the same for each css files

http://jsfiddle.net/tiftof69/43ajgom8/

The current version of the icons only provide a 1 x resolution sprite. We'd ideally also ship a compatible 2 x version (retina).

Hang in tight if you're waiting on this. It'll come soonish :)

The current npm package weigh in at 44 MB. This takes forever to install and takes a lot of diskspace.

Would be nice if there were multiple packages so you could choose a subset of what you want:

• material-design-icons-web - only the web 1x/2x icons
• material-design-icons-svg - only the SVG icons

Might make sense to make material-design-icons just a combination of the above (read; exclude Android/iOS icons from the package) as I don't see why you would want to use npm when creating Android/iOS apps.

For example ic_done_white_48dp has the same size for hdpi and mdpi. And xxhdpi image is smaller than xhdpi.

I downloaded the zip archive from here and after reading this I'd like to try working with SVG sprites. Problem is, I can't find the sprites directory anywhere in the download. Please let me know if I'm being dumb?

I'd really love to have the icons available as .xml vector drawables. This way they can be directly used in Android 5.0 apps. Now we have to do the translation ourselves.

I'm really really sorry to raise this issue and probably this says more about myself than about the icon set's design, but...

...see for yourselves:

vs

"Settings" icon is missing in png sprite (between "search" and "settings applications"

material-design-icons/sprites/css-sprite/sprite-action-*.png

As a web developer who is building a download page,
I need icons to show what platform each download is,
but these icons are not available in this icon suite.

I want official platform icons included in this repo,
so that I can avoid sourcing my own and having inconsistent icon styles.

Hello, I use the example code to add a svg sprite icon in my html code but how to change a color of the icon?

I wrote

Why there aren't icons at 32dp?
https://developer.android.com/design/style/iconography.html

Why is the icon for "settings input composite" and "settings input component" exactly the same?

I ask because I find the icons very nice and would love to be able to use them as a @fontface webfont.

Thanks

Hey,

ic_volume_off shows a volume icon with a slash through it. ic_volume_mute shows a volume icon with no volume bars coming out of it and no slash through it.

I think it's common to see a slash through the volume icon when volume is muted. It surprised me to see this associated with 'off' and not 'mute.' Is this intentional?

We currently auto-generate many of the icons in the repo, but our PNGs could be optimized further. We definitely plan on doing this but want to work it into our asset optimization flow at Google first.

Side: at some point, we may well open-source the tooling process around the icons or add them to this repo but our current focus is on making sure the icons provided are as polished and consumable as possible.

I'm not sure if an issue is the appropriate way to ask this (maybe it is), but the CC-SA-BY 4.0 has a requirement that "if you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original." The meaning of this has been debated previously in other contexts, but I'd like to seek clarity from Google directly about the intent of this license-- these icon images, if used and credited (I assume to "Google, Inc."?), may be used as part of a non-FLOSS project without having to CC-SA-BY the entire app... right? What about other art that may "intermingle" with the CC'd art, as in screenshots, etc?

IANAL, but from the terms of the license itself, "Adapted Material", and "Adapter's License" seem to me to fall within the scope of "stuff pertaining to these images" only. But I think it would be helpful and reassuring to be explicit on this, ie "You may use these images for any kind of purpose you like-- and if you make changes to these images, THOSE ALTERED IMAGES ALONE will be licensed under the same terms, and not any other part of the app, including artistic content or executable or source code."

Or perhaps, to be even clearer, consider re-licensing without the viral "Share-Alike" requirement because I've seen it lead to confusion....

Finally, how are these icons licensed compared to the ones used by Polymer (github)?

Thanks!

Bonus question: Why no ldpi?

I have to use 36dp 36*36 in drawable-mdpi

Hi Material Team,

I saw in the specs that you suggest 54% alpha (#000000) for icons.
In current android specs, you sugest:

Colors: #333333
Enabled: 60% opacity
Disabled: 30% opacity

and

Colors: #FFFFFF
Enabled: 80% opacity
Disabled: 30% opacity

My questions are:

• Why released icons are different with the specs?
• What the best practices for icon color on other background color (not black and white), for example yellow color (#ffeb3b)?

Thanks!
Looking for your feedback!

Best regards,
Henry

P/S:
Checkout:
http://www.google.com/design/spec/style/color.html#color-ui-color-application
http://developer.android.com/design/style/iconography.html

Hi!

I am super curious to hear about your build process for this icon library, I would imagine that you have an awesome tool to output all of the different formats and css files. Maybe you could check the build stuff in or create a blog post?

These icons are absolutely fantastic and I'm putting them to use as I type this.

One question -- in a few scenarios I need 18px or 30px and there is not a corresponding element. If I apply a transformation to the element then Chrome anti-aliasing kicks in on the sub-pixels and causes an ugly blur. I resolved this by transforming the elements in InkScape and then apply PixelSnap, https://code.google.com/p/pixelsnap/, to the transformed path. This extension gracefully snaps the paths to the nearest pixel.

I'm surprisingly happy with the results, but I'm surprised that there's no easier way. I haven't worked extensively with graphics before, though. Is this just a fact of life, or did I make things overly complicated?

At the moment, coloring the SVG icons dynamically is very difficult.

Issue is that it uses the svg icons as a background-image, which cannot be directly manipulated by the DOM. As a developer, this limits the use of the material-design-icons compared to, say, bootstrap glyphicons, which are powerful because they're treated in css as fonts.

Could there be an easy way to inject the SVG directly in-line to the HTML? At the moment I have to directly edit the XML or the SVG file itself to achieve the results I'd like.