Material Design Icons 2021
Aisha Rochow
Material design system icons are simple, modern, friendly, and sometimesquirky. Each icon is created using our design guidelines to depict in simpleand minimal forms the universal concepts used commonly throughout a UI.Ensuring readability and clarity at both large and small sizes, these iconshave been optimized for beautiful display on all common platforms and displayresolutions.
We have made these icons available for you to incorporate them into yourproducts under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in yourproducts. We'd love attribution in your app's about screen, but it's not required.
The complete set of material icons are available on the material icon library. The icons are available for download in SVG or PNGs, formats that aresuitable for web, Android, and iOS projects or for inclusion in any designertools.
The material icon font is the easiest way to incorporate material icons withweb projects. We have packaged all the material icons into a single font thattakes advantage of the typographic rendering capabilities of modern browsers sothat web developers can easily incorporate these icons with only a few lines ofcode.
The icon font weighs in at only 42KB in its smallest woff2 format and 56KB in standard woff format.By comparison, the SVG files compressed with gzip will generally be around 62KB in size, but thiscan be reduced considerably by compiling only the icons you need into a single SVG file with symbolsprites.
Similar to other Google Web Fonts, the correct CSS will be served to activate the'Material Icons' font specific to the browser.An additional CSS class will be declared called .material-icons.Any element that uses this class will have the correct CSS to render these icons from the web font.
Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. Each icon font has a codepoints index in our git repository showing the complete set of names and character codes (here).
These icons were designed to follow the material design guidelines and they look best when using the recommended icon sizes and colors. The styles below make it easy to apply our recommended sizes, colors, and activity states.
Using the icon font allows for easy styling of an icon in any color. In accordance with material design icon guidelines, for active icons we recommend using either black at 54% opacity or white at 100% opacity when displaying these on light or dark backgrounds, respectively. If an icon is disabled or inactive, using black at 26% or white at 30% for light and dark backgrounds, respectively.
The material icons are provided as SVGs that are suitable for web projects. Individual icons are downloadable from the material icons library. The SVGs are also available from the material design icons git repository under the path:
PNG is the most traditional way to display icons on the web. Our downloads from the material icons library provide both single and double densities for each icon. They are referred to as 1x and 2x respectively in the download. Icons are also available in the git repository under:
Material icons also work well within iOS apps. In both the material icons library and git repository, these icons are packaged up in Xcode imagesets which will work easily with Xcode Asset Catalogs (xcassets). These imagesets can be added to any Xcode Asset Catalogs by dragging them into Xcode on to the asset catalog or by copying the folder into the xcasset folder.
The imageset contains the single, double and triple density images (1x, 2x, 3x) so they work on all known iOS screen densities. Both black and white icons are provided, but we recommend using UIImage's imageWithRenderingMode with UIImageRenderingModeAlwaysTemplate which will allow the image to be used as an alpha mask that can be tinted to any possible color.
Languages such as Arabic and Hebrew are read from right-to-left (RTL). For RTL languages, UIs should be mirrored to display most elements in RTL. When a user interface is mirrored for RTL, some of the icons should also be mirrored. When text, layout, and iconography are mirrored to support right-to-left UIs, anything that relates to time should be depicted as moving from right to left. For example, forward points to the left, and backwards points to the right. However, be mindful that the context in which the icon is placed also influences whether an icon should be mirrored or not.
This Android developer article describes in-depth how to implement RTL user interfaces. By default on Android, icons are not mirrored when the layout direction is mirrored. You need to specifically mirror the appropriate icons when needed, either by providing specialized assets for RTL languages, or using framework functionality to mirror the assets.
The Pictogrammers are a dedicated group of collaborators from all walks of life. Hailing from nearly every part of the globe, we come together to express ideas in a universal language so that all may benefit. Icons may be small, but they are powerful forms of communication in today's digital age. Built on our passion for beautiful and simple design, we strive to make iconography easily accessible for whatever your use case may be. From designers building prototypes to developers writing code, finding and implementing an icon should be a snap!
I am aware of the possibility that the SVG source code can be edited so achieve the effect, but this does not seem to be the canonical way to go. The material design icons repository has their CSS image sprites in different versions depending on the color, while the SVG is in just one color (in fact, in no color because no color is ever mentioned in the SVG code). If I needed different SVG sprite files for white or for black icons, they would have included different versions as they did in the case of CSS image sprites, wouldn't they?
Since I was using angularjs in my project, I wrote-up an angularjs directive that generates svg icons with custom fill-color / size. I'm sharing it here, in case someone finds it useful: -material-icons/demo.html
I'm a developer, and as of the past week or so, a fan of paint.net... I frequently use the material design icons for, well, icons. There's not a lot of shapes available in paint.net that I could really use but I made use of the custom shapes feature. I figured someone else could use this too so I tried to make it non-developer friendly...
There's A LOT of material design icons you can choose from on materialdesignicons.com. For this example I am using the "emoticon-devil-outline" icon. You can search for whatever shape/icon you need and when you find one just open the details up.
We have made these icons available for you to incorporate them 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. The only thing we ask is that you not re-sell these icons.
Clearly, font file is winner when it comes to bundle size. But, SVG file size can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites. We will look into it later on.
As you saw, except for some cases, font and svg, both perform well in browsers. But we can improve the bundle size of svg, by compiling only the icons we need in a single file. Let's see how we can do it in Angular.
First of all, compiling single file with svg symbol sprite is not related to Angular or any other web framework. It's an opinionated way of achieving cost and performance effective solution to use material icons in your web application. You can read more about it here.
With above, we done with all the setup and coding. Now, to use any other icon, for example done_all icon, simply download it from material icons library, rename it to some memorable general keyword, put it under ? src/icons/svg. And use it like below:
Confindential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.
My entire mobile development career I have gone all in on using device specific images and icons. These are properly scaled and sized images that fit @1x, @2x, @3x, hdpi, xhdpi, xxhdi, and so on, which are great because they are super optimized for each platform. The reason I do this was because it gives very consistent look and feel to an app across all of the different form factors of the devices the app may run on. It also happens to be the official way that Google, Apple, and Microsoft tell you to do it and they even give you tools like the Asset Studio to help you generate them. However, my eyes have been opened and I am all in on FONTS! Yes... FONTS! I bet you thought I was going to say SVG, but NO, FONTS!
I mean look at all of those beautiful icons right there. I bet you thought they were images... nope those are being generated from a font! The great part about fonts like this is that they bundle tons of icons into a single file and it is really easy to access them with a specific code. additionally, since they are a font they should scale properly across different form factors :)
In this instance I am using fonts that are icons inside of the application that are reasonable to look and feel exactly the same across every platform. My recommendation as always is to use the platform look and feel for icons in toolbars and tabs. This will ensure your users have the best experience. Also, be aware that they will add some size to your app (material design icons was around 500KB!). Beyond that I say go for it :)
df19127ead