Giter VIP home page Giter VIP logo

material-design-icons's Introduction

Material Icons / Material Symbols

These are two different official icon sets from Google, using the same underlying designs. Material Icons is the classic set, while Material Symbols was introduced in April 2022, built on variable font technology.

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

The icons are designed under the material design guidelines.

Icon Requests

We’d love to support your icon needs! Please submit your request here on GitHub as an issue.

Please note that Google Fonts does not accept user submissions of finished icon designs! There are fairly strict guidelines for Material icons, plus Google has upstream source files from which this repo is generated. Therefore, Google does not accept pull requests for icon files (whether new icon suggestions, or fixes for existing icons). Concepts are appreciated—just don’t design SVGs and submit them via pull request.

However, users are perfectly welcome to point at outside files or images as examples—for the kind of thing they want, but they won’t just be taken “as is.” This works especially well if you have multiple examples for a single icon, to help us understand the “essence” of the idea.

For example, there is a fairly universal conceptual logo/icon for “agender,” so if you were proposing Google add an agender icon in the Material style, either mentioning that, or pointing at https://www.google.com/search?q=agender+icon would be a helpful tip.

Third-party logos

Currently, Google does not include 3rd-party logos among the Material Symbols or Material Icons due to legal reasons. Some 3rd-party logos that were included in the past have since been removed.

npm Packages

Google does not currently maintain the npm package for this repo, past v3 (2016). However, user @marella is hosting the following. He tells us these are automatically updated and published using GitHub Actions. Note: Google does not monitor or vet these packages.

  • Only WOFF2 variable fonts and CSS for Material Symbols
  • Includes outlined, rounded, and sharp icons and all variations of fill, weight, grade, and optical size
  • Supports Sass
  • Only WOFF2, WOFF fonts and CSS
  • Includes outlined, round, sharp and two-tone icons
  • Supports Sass
  • Only WOFF2 fonts and CSS
  • Lighter version of material-icons package
  • Doesn't support older browsers such as Internet Explorer because of dropping WOFF (v1)
  • Only SVGs
  • Optimizes SVGs using SVGO

Material Icons

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons?icon.set=Material+Icons

These classic icons are available in five distinct styles:

  • Outlined
  • Filled (the font version is just called Material Icons, as this is the oldest style)
  • Rounded
  • Sharp
  • Two tone

The following directories in this repo contain specifically Material Icons (not Material Symbols) content:

  • android
  • font
  • ios
  • png
  • src

What is currently not available in Material Icons?

  • variable fonts
  • weights other than Regular
  • grades other than Regular
  • a means to animate Fill transitions

Material Symbols

These newer icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

These icons were built/designed as variable fonts first (based on the 24 px designs from Material Icons). There are three separate Material Symbols variable fonts, which also have static icons available (but those do not have all the variations available, as that would be hundreds of styles):

  • Outlined
  • Rounded
  • Sharp
  • Note that although there is no separate Filled font, the Fill axis allows access to filled styles—in all three fonts.

Each of the fonts has these design axes, which can be varied in CSS, or in many more modern design apps:

  • Optical Size (opsz) from 20 to 48 px. The default is 24.
  • Weight from 100 (Thin) to 700 (Bold). Regular is 400.
  • Grade from -50 to 200. The default is 0 (zero).
  • Fill from 0 to 100. The default is 0 (zero).

The following directories in this repo contain specifically Material Symbols (not Material Icons) content:

  • symbols
  • variablefont

What is currently not available in Material Symbols?

  • only the 20 and 24 px versions are designed with perfect pixel-grid alignment
  • the only pre-made fonts are the variable fonts
  • there are no two-tone icons

Material Icons update history

4.0.0 Update

  • 2020 Aug 31
  • Restructured repository, updated assets.

3.0.1 Update

  • 2016 Sep 01
  • Changed license in package.json.
  • Added missing device symbol sprites.

3.0.0 Update

  • 2016 Aug 25
  • License change to Apache 2.0!

2.0

  • 2016 May 28

Getting Started

Read the developer guide on how to use the material design icons in your project.

Using a font

The font and variablefont folders contain pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
      rel="stylesheet">

Read more on Material Symbols or Material Icons in the Google Fonts developer guide.

License

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.

material-design-icons's People

Contributors

adam-devel avatar addyosmani avatar ahhj93 avatar appsforartists avatar aviau avatar curthard89 avatar davelab6 avatar devesh avatar esofromtheeast avatar genome21 avatar jakesylvestre avatar jestelle avatar jpc-ae avatar kkirsche avatar lancelot03 avatar liquidx avatar m3o7 avatar mbrickn avatar miaopeng avatar niedzielski avatar otomeskhy avatar pi0up avatar roeln avatar rsheeter avatar sdefresne avatar tpapaz avatar tphinney avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

material-design-icons's Issues

What is the best color and alpha for icon?

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

SVG bugs

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.

how to change the svg sprite color?

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

.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; fill: red;} an dnothing happen. hel me please

Add 2x PNG sprites for the icons

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 :)

Some icons are wrong.

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

Sprites directory missing from download?

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?

Separate packages for web and SVG icons

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.

Hierarchy inside out

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.

Where are the SVGs?

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

Changing SVG icon colors

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.

Include build tools in repo

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?

Are there any plans for sport related icons?

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 :)

'Invisible' shapes appear when importing

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:

pastedgraphic-33

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

pastedgraphic-34

Optimize SVG please

  • 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. ;)

"settings" icon missing on png sprite

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

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

Create an icon font

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.

Please add a icon for navigation drawer avatar

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.

Textdirection icons incorrect

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).
textdirectionicons

Add Windows/Linux/Mac/Android/iOS icons

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.

Thank you! :)

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?

Artwork bugs

  • 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

Include Vector Drawables

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.

Optimize PNG images

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.

Are the names for ic_volume_off and ic_volume_mute swapped?

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?

Viral license question-- Can non-FLOSS projects/apps use these icons?

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?

Youtube?

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.