diff --git a/index.html b/index.html index d777a7a35d4b..60804c1e72e0 100644 --- a/index.html +++ b/index.html @@ -6,121 +6,101 @@ - -
An overview of material icons—where to get them and how to integrate them with your projects.
- + - -Material design system icons are simple, modern, friendly, and sometimes quirky. - Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. - Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.
-See the full set of material design icons in the material icons library.
- - -The icons are available in several formats and are suitable for different types of projects and platforms, for developers in their apps, and for designers in their mockups or prototypes.
- -We have made these icons available for you to incorporate them into your products under the Creative Common Attribution 4.0 International License (CC-BY 4.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 the icons themselves.
- -The complete set of material icons are available in the material icon library. - The icons are available for download in SVG or PNG—formats which are suitable for the web, Android, and iOS projects, or for inclusion in any designer tools. - The material icon font is the easiest way to incorporate material icons with web projects, while SVG symbol sprites are the most flexible.
-The SVGs are also available from the material design icons git repository under the path:
-material-design-icons/*/svg/production/
-
- For example, icons for maps are in maps/svg/production:
-material-design-icons/maps/svg/production/
-
-
- Grab the latest stable zip archive (~57MB) of all icons or the bleeding-edge version from master.
- -The material icons are available from the git repository which contains the complete set of icons including all the various formats we are making available.
+ +Material design system icons are simple, modern, friendly, and sometimes +quirky. Each icon is created using our design guidelines to depict in simple +and minimal forms the universal concepts used commonly throughout a UI. +Ensuring readability and clarity at both large and small sizes, these icons +have been optimized for beautiful display on all common platforms and display +resolutions.
+See the full set of material design icons at the material icons library.
+ + +The icons are available in several formats and are suitable for different types +of projects and platforms, for developers in their apps, and for designers in +their mockups or prototypes.
+We have made these icons available for you to incorporate them into your +products under the Creative Common Attribution 4.0 International License (CC-BY 4.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 +the icons themselves.
+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 are +suitable for web, Android, and iOS projects or for inclusion in any designer +tools.
+Grab the latest stable zip archive (~57MB) of all icons or the bleeding-edge version from master.
+The material icons are available from the git repository which contains the complete set of icons including all the various formats we +are making available.
$ git clone http://github.com/google/material-design-icons/
-
-
- Install the icons using the Bower package manager.
+Install the icons using the Bower package manager.
$ bower install material-design-icons
-
-
- Install the icons using the npm package manager.
+Install the icons using npm package manager.
$ npm install material-design-icons
-
-
- We have packaged all the material icons into a single font that takes advantage of the typographic rendering capabilities of modern browsers so that web developers can easily incorporate these icons with only a few lines of code.
-Using the font is not only the simplist method, but efficient and stylish as well:
-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 this can be reduced considerably by compiling only the icons you need into a single SVG file with symbol sprites. - In the end, go with what best suits your project.
- -The easiest way to set up icon fonts for use in any web page is through Google Web Fonts. - All you need to do is include a single line of HTML:
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
- 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.
For those looking to self host the web font, some additional setup is necessary.
- Host the icon font in a location, for example https://example.com/material-icons.woff
, and add the following CSS rule:
The material icon font is the easiest way to incorporate material icons with +web projects. We have packaged all the material icons into a single font that +takes advantage of the typographic rendering capabilities of modern browsers so +that web developers can easily incorporate these icons with only a few lines of +code.
+Using the font is not only the most convenient method, but it is efficient and +looks great:
+The icon font contains 750+ icons and weighs in at only 40KB (woff2 format). In +comparison, a ZIP file of these in SVGs will be more than 50% larger.
+The easiest way to set up icon fonts for use in any web page is through Google Web Fonts. All you need to do is include a single line of HTML:
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet">
+
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.
For those looking to self host the web font, some additional setup is necessary.
+Host the icon font in a location, for example https://example.com/material-icons.woff
and add the
+following CSS rule:
@font-face {
font-family: 'Material Icons';
font-style: normal;
@@ -132,9 +112,9 @@ Setup Method 2. Self hosting
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
-
- In addition, the CSS rules for rendering the icon will need to be declared to prevent rendering quirks. - These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:
+In addition, the CSS rules for rendering the icon will need to be declared. +These rules are normally served as part of the Google Web Font stylesheet, but +will need to be included manually in your projects when self-hosting the font:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
@@ -149,7 +129,6 @@ Setup Method 2. Self hosting
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
-
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
@@ -159,62 +138,68 @@ Setup Method 2. Self hosting
/* Support for IE. */
font-feature-settings: 'liga';
}
-
-
- It’s easy to incorporate icons into your web page. Here’s a small example:
-<i class="material-icons">face</i>
This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. - The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.
-The ligatures feature is supported in most modern browsers on both desktop and mobile devices.
-Browser | -Version supporting ligatures | -
Google Chrome | -11 | -
Mozilla Firefox | -3.5 | -
Apple Safari | -5 | -
Microsoft IE | -10 | -
Opera | -15 | -
Apple MobileSafari | -iOS 4.2 | -
Android Browser | -3.0 | -
For browsers that do not support ligatures, fall back to specifying the icons using numeric character references like the example below:
-<i class="material-icons"></i>
Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. - A codepoints index is also available on our git repository which shows the complete set of names and character codes.
- -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.
+It’s easy to incorporate icons into your web page. Here’s a small example:
+<i
+class="material-icons">face</i>
This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.
+This feature is supported in most modern browsers on both desktop and mobile +devices.
+Browser | +Version supporting ligatures | +
Google Chrome | +11 | +
Mozilla Firefox | +3.5 | +
Apple Safari | +5 | +
Microsoft IE | +10 | +
Opera | +15 | +
Apple MobileSafari | +iOS 4.2 | +
Android Browser | +3.0 | +
For browsers that do not support ligatures, fall back to specifying the icons +using numeric character references like the example below:
+<i
+class="material-icons"></i>
Find both the icon names and codepoints on the material icons library by selecting any icon and opening the icon font panel. A codepoints index is also available on our git repository which shows the complete set of names +and character codes.
+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.
// Rules for sizing the icon.
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
@@ -228,196 +213,170 @@ Styling font icons in material design<
// Rules for using icons as white on a dark background.
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
-
- Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, we recommend them to be shown in either 18, 24, 36 or 48px, the default being 24px.
-CSS rules for the standard material design sizing guidelines:
+Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, we recommend them to be shown in either 18, 24, 36 or 48px. The default being +24px.
+CSS rules for the standard material design sizing guidelines:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
-
- Material icons look best at 24px, but if an icon needs to be displayed in an alternative size, using the above CSS rules can help:
-<i class="material-icons md-18">face</i>
<i class="material-icons md-24">face</i>
<i class="material-icons md-36">face</i>
<i class="material-icons md-48">face</i>
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.
-Here are some examples, using the material CSS styles described above:
+Material icons look best at 24px, but if an icon needs to be displayed in an +alternative size, using the above CSS rules can help:
+<i class="material-icons
+md-18">face</i>
<i class="material-icons
+md-24">face</i>
<i class="material-icons
+md-36">face</i>
<i class="material-icons
+md-48">face</i>
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.
+Here are some examples, using the material CSS styles described above:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
-
- Example for drawing an icon on a light background with a dark foreground color:
-<i class="material-icons md-dark">face</i>
<i class="material-icons md-dark md-inactive">face</i>
Example for drawing an icon on a dark background with a light foreground color:
-<i class="material-icons md-light">face</i>
<i class="material-icons md-light md-inactive">face</i>
To set a custom icon color, define a CSS rule specifying the desired color for the font:
+Example for drawing an icon on a light background with a dark foreground color:
+<i class="material-icons
+md-dark">face</i>
<i class="material-icons
+md-dark md-inactive">face</i>
Example for drawing an icon on a dark background with a light foreground color:
+<i class="material-icons
+md-light">face</i>
<i class="material-icons
+md-light md-inactive">face</i>
To set a custom icon color, define a CSS rule specifying the desired color for +the font:
.material-icons.orange600 { color: #FB8C00; }
-
- And then use the class when referring to the icon:
-<i class="material-icons orange600">face</i>
Material icons are available as compiled, <use>
able SVG symbol collections.
- We have packaged each icon set into separate sprite sheets and symbol sprites, but it is recommended to generate your own from the individual icons found in the folders for each set.
All the SVG sprites created for the icons can be found in the sprites
directory under svg-sprite
.
- Look for the -symbol
marker after the name of the icon set you want to use.
Setting up your environment and tooling to take advantage of SVG symbols may take some initial work, but the result is efficient, stylish, symantic, and most of all flexible:
-While it may be tempting to just grab all the icons at once, choosing them individually will help in optimizing your site or app. One thing you will need to do is include the svg4everybody polyfill to help browsers like IE, Edge, and some older browsers reference the external svg symbol map:
-<script src="https://rawgit.com/jonathantneal/svg4everybody/master/dist/svg4everybody.js"></script>
-<script>svg4everybody();</script>
-
- For more information on generating svg symbol collections and similar sprite sheets, refer to the documentation in the sprites directory of the git repository. - -
To add an icon using symbol sprites, you will need to add an svg element that <use>
es the reference file with a link to the specific icon you want.
- Since the icons are stored as <symbol>
s, the viewbox is already set up and can be scaled relatively without needing to keep adjacent symbols in mind. Here’s a small example:
<svg><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg>
Styling svg symbol icons is done similarly to fonts but using different properties. - Instead of setting the font size, you will need set the size of the icon using CSS the same as other images or box elements. - It is easiest to do this by targeting all svg tags with the desired width and height, and then overriding the size for individual classes and IDs as needed:
-svg { width: 24px; height: 24px; }
-.material-icons.md-svg-48 { width: 48px; height: 48px; }
-
- Classes and IDs can either be added to the <svg>
tag or the <use>
tag as needed:
-
<svg class="material-icons md-svg-48><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg>
Likewise, there's a difference when it comes to changing the icon color.
- To do so, you will need to target the fill
property for the paths that make up the icon:
.material-icons.md-svg-orange600 { fill: #FB8C00; }
-
- Normally, inline css would allow you to target the path directly.
- With a <use>
element, however, a shadow DOM is created with a line that is much harder to cross.
- Thankfully, the fill property cascades and so it can be applied, again, to either the <svg>
or <use>
tag:
-
<svg class="material-icons md-svg-orange600><use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_face_24px"></use></svg>
Material icons are also available as regular images, both in PNG and SVG formats. - We have packaged each icon set into separate sprite sheets, but it is recommended to generate your own from the individual icons found in the folders for each set.
- -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_web
and 2x_web
respectively in the download. Icons are also available in the git repository under:
material-design-icons/*/1x_web/
-material-design-icons/*/2x_web/
-
- If multiple icons are in use on a web site, creating spritesheets out of the images is recommended. - For more information, refer to recommendations in the sprites directory in the git repository.
-Individual icons are downloadable from the material icons library. - The SVGs are also available from the material design icons git repository under the path:
+and then use the class when referring to the icon:
+<i class="material-icons
+orange600">face</i>
Material icons are also available as regular images, both in PNG and SVG +formats.
+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:
material-design-icons/*/svg/production/
For example, icons for maps are in maps/svg/production:
material-design-icons/maps/svg/production/
If multiple icons are in use on a web site, creating spritesheets out of the images is recommended. For more information, refer to the documentation in the sprites directory of the git repository.
PNGs suitable for Android are available from the material icons library. - These come in all the supported screen densities so they should look good on any device.
-The icons are also available in the material design icons git repository in the same combination of colors and sizes named as follows:
+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_web
and 2x_web
respectively in the download. Icons are also available in the git repository
+under:
material-design-icons/*/1x_web/
+material-design-icons/*/2x_web/
+
If multiple icons are in use on a web site, creating spritesheets out of the +images is recommended. For more information, refer to recommendations in the sprites directory in the git repository.
+PNGs suitable for Android are available from the material icons library. These come in all the supported screen densities so they should look good on +any device.
+The icons are also available in the material design icons git repository in the same combination of colors and sizes named as follows:
*/drawable-{{density}}/ic_{{name}}_{{color}}_{{size}}dp.png
-
- A density-independent VectorDrawable is provided which is supported from Android Lollipop and later:
+A density-independent VectorDrawable is provided which is supported from +Android Lollipop and later:
*/drawable-anydpi-v21/ic_{{name}}_black_24dp.xml
-
- The Vector Drawable is currently only available as a black 24dp icon. - This is for compatibility with our most standard icon size. - To render the icon in a different color, use drawable tinting available on Android Lollipop.
-When using the Vector Drawable, it may not be necessary to include the xxxhdpi density PNG since it is unlikely a device supporting that screen density does not support Vector Drawables.
-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.
-Objective-C example:
+The Vector Drawable is currently only available as a black 24dp icon. This is +for compatibility with our most standard icon size. To render the icon in a +different color, use drawable tinting available on Android Lollipop.
+When using the Vector Drawable, it may not be necessary to include the xxxhdpi +density PNG since it is unlikely a device supporting that screen density does +not support Vector Drawables.
+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.
+Objective-C example:
UIButton *button = [[UIButton alloc] init];
-UIImage *closeImage = [[UIImage imageNamed:@"ic_close"]
- imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+UIImage *closeImage =
+ [[UIImage imageNamed:@"ic_close"]
+ imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
-
- Swift Example:
+Swift Example:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
@@ -427,13 +386,24 @@ Icons for iOS