File indexing completed on 2024-04-28 05:40:29
0001 <html> 0002 <head> 0003 <meta charset="utf-8"> 0004 <meta name="viewport" content="initial-scale=1, width=device-width"/> 0005 <link href="//fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet" type="text/css"> 0006 <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic" rel="stylesheet" type="text/css"> 0007 <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 0008 <link rel="stylesheet" type="text/css" href="www/css/material.css"> 0009 <title>Material icons guide - Google design</title> 0010 </head> 0011 <body class="icons-docs"> 0012 <header> 0013 <div class="header-wrapper"> 0014 <div class="header-title"> 0015 <span class="section-title">Material icons guide</span> 0016 </div> 0017 </div> 0018 </header> 0019 0020 <div id="page-container"> 0021 <div id="page-inner-container"> 0022 0023 0024 <p>An overview of material icons—where to get them and how to integrate them with your projects.</p> 0025 0026 <nav class="toc"> 0027 <h1>Contents</h1> 0028 <ul> 0029 <li><a href="#what-are-material-icons">What are material icons</a></li> 0030 <li><a href="#getting-icons">Getting icons</a></li> 0031 <li><a href="#icon-font-for-the-web">Icon font for the web</a></li> 0032 <li><a href="#icon-images-for-the-web">Icon images for the web</a></li> 0033 <li><a href="#icons-for-android">Icons for Android</a></li> 0034 <li><a href="#icons-for-ios">Icons for iOS</a></li> 0035 </ul> 0036 </nav> 0037 0038 <h1 id="what-are-material-icons">What are material icons</h1> 0039 <p>Material design system icons are simple, modern, friendly, and sometimes 0040 quirky. Each icon is created using our design guidelines to depict in simple 0041 and minimal forms the universal concepts used commonly throughout a UI. 0042 Ensuring readability and clarity at both large and small sizes, these icons 0043 have been optimized for beautiful display on all common platforms and display 0044 resolutions.</p> 0045 <p>See the full set of material design icons at the <a href="https://www.google.com/design/icons/">material icons library</a>.</p> 0046 <div class="img"><a href="https://www.google.com/design/icons/"><img src="www/images/icons-library.png" alt="alt text"></a></div> 0047 0048 <h1 id="getting-icons">Getting icons</h1> 0049 <p>The icons are available in several formats and are suitable for different types 0050 of projects and platforms, for developers in their apps, and for designers in 0051 their mockups or prototypes.</p> 0052 <h2 id="licensing">Licensing</h2> 0053 <p>We have made these icons available for you to incorporate them into your 0054 products under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Common Attribution 4.0 International License (CC-BY 4.0)</a>. Feel free to remix and re-share these icons and documentation in your 0055 products. We'd love attribution in your app's <em>about</em> screen, but it's not required. The only thing we ask is that you not re-sell 0056 the icons themselves.</p> 0057 <h2 id="browsing-and-downloading-individual-icons">Browsing and downloading individual icons</h2> 0058 <p>The complete set of material icons are available on the <a href="https://www.google.com/design/icons/">material icon library</a>. The icons are available for download in SVG or PNGs, formats that are 0059 suitable for web, Android, and iOS projects or for inclusion in any designer 0060 tools.</p> 0061 <h2 id="downloading-everything">Downloading everything</h2> 0062 <p>Grab the <a href="https://github.com/google/material-design-icons/releases/download/2.0.0/material-design-icons-2.0.0.zip">latest stable zip archive</a> (~57MB) of all icons or the <a href="https://github.com/google/material-design-icons/archive/master.zip">bleeding-edge version from master.</a></p> 0063 <h2 id="git-repository">Git Repository</h2> 0064 <p>The material icons are available from the <a href="https://github.com/google/material-design-icons">git repository</a> which contains the complete set of icons including all the various formats we 0065 are making available.</p> 0066 <pre><code>$ git clone http://github.com/google/material-design-icons/ 0067 </code></pre><h2 id="installing-icons-from-bower">Installing icons from bower</h2> 0068 <p>Install the icons using the <a href="http://bower.io/">Bower</a> package manager.</p> 0069 <pre><code>$ bower install material-design-icons 0070 </code></pre><h2 id="installing-icons-from-npm">Installing icons from npm</h2> 0071 <p>Install the icons using <a href="http://npmjs.io/">npm</a> package manager.</p> 0072 <pre><code>$ npm install material-design-icons 0073 </code></pre><p><hr></p> 0074 <h1 id="icon-font-for-the-web">Icon font for the web</h1> 0075 <p>The material icon font is the easiest way to incorporate material icons with 0076 web projects. We have packaged all the material icons into a single font that 0077 takes advantage of the typographic rendering capabilities of modern browsers so 0078 that web developers can easily incorporate these icons with only a few lines of 0079 code.</p> 0080 <p>Using the font is not only the most convenient method, but it is efficient and 0081 looks great:</p> 0082 <ul> 0083 <li>750+ icons all from a single download.</li> 0084 <li>Served from Google Web Font servers or can be self hosted.</li> 0085 <li>Supported by all modern web browsers.</li> 0086 <li>Colored, sized and positioned entirely with CSS.</li> 0087 <li>Vector-based: Looks great at any scale, retina displays, low-dpi display 0088 screens.</li> 0089 </ul> 0090 <p>The icon font contains 750+ icons and weighs in at only 40KB (woff2 format). In 0091 comparison, a ZIP file of these in SVGs will be more than 50% larger.</p> 0092 <h2 id="setup-method-1-using-via-google-web-fonts">Setup Method 1. Using via Google Web Fonts</h2> 0093 <p>The easiest way to set up icon fonts for use in any web page is through <a href="https://developers.google.com/fonts/">Google Web Fonts</a>. All you need to do is include a single line of HTML:</p> 0094 <pre><code><link href="https://fonts.googleapis.com/icon?family=Material+Icons" 0095 rel="stylesheet"> 0096 </code></pre><p>Similar to other Google Web Fonts, the correct CSS will be served to activate 0097 the 'Material Icons' font specific to the browser. An additional CSS class will 0098 be declared called <code>.material-icons</code>. Any element that uses this class will have the correct CSS to render these 0099 icons from the web font.</p> 0100 <h2 id="setup-method-2-self-hosting">Setup Method 2. Self hosting</h2> 0101 <p>For those looking to self host the web font, some additional setup is necessary. 0102 Host the <a href="https://github.com/google/material-design-icons/tree/master/iconfont">icon font</a> in a location, for example <code>https://example.com/material-icons.woff</code> and add the 0103 following CSS rule:</p> 0104 <pre><code>@font-face { 0105 font-family: 'Material Icons'; 0106 font-style: normal; 0107 font-weight: 400; 0108 src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ 0109 src: local('Material Icons'), 0110 local('MaterialIcons-Regular'), 0111 url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), 0112 url(https://example.com/MaterialIcons-Regular.woff) format('woff'), 0113 url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); 0114 } 0115 </code></pre><p>In addition, the CSS rules for rendering the icon will need to be declared. 0116 These rules are normally served as part of the Google Web Font stylesheet, but 0117 will need to be included manually in your projects when self-hosting the font:</p> 0118 <pre><code>.material-icons { 0119 font-family: 'Material Icons'; 0120 font-weight: normal; 0121 font-style: normal; 0122 font-size: 24px; /* Preferred icon size */ 0123 display: inline-block; 0124 width: 1em; 0125 height: 1em; 0126 line-height: 1; 0127 text-transform: none; 0128 letter-spacing: normal; 0129 0130 /* Support for all WebKit browsers. */ 0131 -webkit-font-smoothing: antialiased; 0132 /* Support for Safari and Chrome. */ 0133 text-rendering: optimizeLegibility; 0134 0135 /* Support for Firefox. */ 0136 -moz-osx-font-smoothing: grayscale; 0137 0138 /* Support for IE. */ 0139 font-feature-settings: 'liga'; 0140 } 0141 </code></pre><h2 id="using-the-icons-in-html">Using the icons in HTML</h2> 0142 <p>It’s easy to incorporate icons into your web page. Here’s a small example:</p> 0143 <div class="icons-preview-code"> 0144 0145 <div class="icons-preview"><i class="material-icons">face</i></div> 0146 0147 <div class="icons-code"><code><i 0148 class="material-icons">face</i></code></div> 0149 0150 <p></div></p> 0151 <p>This example uses a typographic feature called <a href="http://alistapart.com/article/the-era-of-symbol-fonts">ligatures</a>, 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.</p> 0152 <p>This feature is supported in most modern browsers on both desktop and mobile 0153 devices.</p> 0154 <table> 0155 <tr> 0156 <td><strong>Browser</strong></td> 0157 <td><strong>Version supporting ligatures</strong></td> 0158 </tr> 0159 <tr> 0160 <td>Google Chrome</td> 0161 <td>11</td> 0162 </tr> 0163 <tr> 0164 <td>Mozilla Firefox</td> 0165 <td>3.5</td> 0166 </tr> 0167 <tr> 0168 <td>Apple Safari</td> 0169 <td>5</td> 0170 </tr> 0171 <tr> 0172 <td>Microsoft IE</td> 0173 <td>10</td> 0174 </tr> 0175 <tr> 0176 <td>Opera</td> 0177 <td>15</td> 0178 </tr> 0179 <tr> 0180 <td>Apple MobileSafari</td> 0181 <td>iOS 4.2</td> 0182 </tr> 0183 <tr> 0184 <td>Android Browser</td> 0185 <td>3.0</td> 0186 </tr> 0187 </table> 0188 0189 <p>For browsers that do not support ligatures, fall back to specifying the icons 0190 using numeric character references like the example below:</p> 0191 <div class="icons-preview-code"> 0192 0193 <div class="icons-preview"><i class="material-icons"></i></div> 0194 0195 <div class="icons-code"><code><i 0196 class="material-icons">&#xE87C;</i></code></div> 0197 0198 <p></div></p> 0199 <p>Find both the icon names and codepoints on the <a href="https://www.google.com/design/icons/">material icons library</a> by selecting any icon and opening the icon font panel. A <a href="https://github.com/google/material-design-icons/blob/master/iconfont/codepoints">codepoints index</a> is also available on our git repository which shows the complete set of names 0200 and character codes.</p> 0201 <h2 id="styling-icons-in-material-design">Styling icons in material design</h2> 0202 <p>These icons were designed to follow the <a href="https://www.google.com/design/spec/style/icons.html">material design guidelines</a> 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.</p> 0203 <pre><code>// Rules for sizing the icon. 0204 .material-icons.md-18 { font-size: 18px; } 0205 .material-icons.md-24 { font-size: 24px; } 0206 .material-icons.md-36 { font-size: 36px; } 0207 .material-icons.md-48 { font-size: 48px; } 0208 0209 // Rules for using icons as black on a light background. 0210 .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } 0211 .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } 0212 0213 // Rules for using icons as white on a dark background. 0214 .material-icons.md-light { color: rgba(255, 255, 255, 1); } 0215 .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } 0216 </code></pre><h3 id="sizing">Sizing</h3> 0217 <p>Although the icons in the font can be scaled to any size, in accordance with <a href="https://www.google.com/design/spec/style/icons.html#icons-system-icons">material design icons guidelines</a>, we recommend them to be shown in either 18, 24, 36 or 48px. The default being 0218 24px.</p> 0219 <p>CSS rules for the standard material design sizing guidelines:</p> 0220 <pre><code>.material-icons.md-18 { font-size: 18px; } 0221 .material-icons.md-24 { font-size: 24px; } 0222 .material-icons.md-36 { font-size: 36px; } 0223 .material-icons.md-48 { font-size: 48px; } 0224 </code></pre><p>Material icons look best at 24px, but if an icon needs to be displayed in an 0225 alternative size, using the above CSS rules can help:</p> 0226 <div class="icons-preview-code"> 0227 0228 <div class="icons-preview"><i class="material-icons md-18">face</i><div 0229 class="icon-caption">18px</div></div> 0230 0231 <div class="icons-code"><code><i class="material-icons 0232 md-18">face</i></code></div> 0233 0234 <p></div></p> 0235 <div class="icons-preview-code"> 0236 0237 <div class="icons-preview"><i class="material-icons md-24">face</i><div 0238 class="icon-caption">24px</div></div> 0239 0240 <div class="icons-code"><code><i class="material-icons 0241 md-24">face</i></code></div> 0242 0243 <p></div></p> 0244 <div class="icons-preview-code"> 0245 0246 <div class="icons-preview"><i class="material-icons md-36">face</i><div 0247 class="icon-caption">36px</div></div> 0248 0249 <div class="icons-code"><code><i class="material-icons 0250 md-36">face</i></code></div> 0251 0252 <p></div></p> 0253 <div class="icons-preview-code"> 0254 0255 <div class="icons-preview"><i class="material-icons md-48">face</i><div 0256 class="icon-caption">48px</div></div> 0257 0258 <div class="icons-code"><code><i class="material-icons 0259 md-48">face</i></code></div> 0260 0261 <p></div></p> 0262 <h3 id="coloring">Coloring</h3> 0263 <p>Using the icon font allows for easy styling of an icon in any color. 0264 In accordance with <a href="https://www.google.com/design/spec/style/icons.html#icons-system-icons">material design icon guidelines</a>, for active icons we recommend using either black at 54% opacity or white at 0265 100% opacity when displaying these on light or dark backgrounds, respectively. 0266 If an icon is disabled or inactive, using black at 26% or white at 30% for 0267 light and dark backgrounds, respectively.</p> 0268 <p>Here are some examples, using the material CSS styles described above:</p> 0269 <pre><code>.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } 0270 .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } 0271 0272 .material-icons.md-light { color: rgba(255, 255, 255, 1); } 0273 .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } 0274 </code></pre><p>Example for drawing an icon on a light background with a dark foreground color:</p> 0275 <div class="icons-preview-code"> 0276 0277 <div class="icons-preview"><i class="material-icons md-dark">face</i><div 0278 class="icon-caption">Normal</div></div> 0279 0280 <div class="icons-code"><code><i class="material-icons 0281 md-dark">face</i></code></div> 0282 0283 <p></div></p> 0284 <div class="icons-preview-code"> 0285 0286 <div class="icons-preview"><i class="material-icons md-dark 0287 md-inactive">face</i><div class="icon-caption">Disabled</div></div> 0288 0289 <div class="icons-code"><code><i class="material-icons 0290 md-dark md-inactive">face</i></code></div> 0291 0292 <p></div></p> 0293 <p>Example for drawing an icon on a dark background with a light foreground color:</p> 0294 <div class="icons-preview-code"> 0295 0296 <div class="icons-preview icons-dark-bg"><i class="material-icons 0297 md-light">face</i><div class="icon-caption">Normal</div></div> 0298 0299 <div class="icons-code"><code><i class="material-icons 0300 md-light">face</i></code></div> 0301 0302 <p></div></p> 0303 <div class="icons-preview-code"> 0304 0305 <div class="icons-preview icons-dark-bg"><i class="material-icons md-light 0306 md-inactive">face</i><div class="icon-caption">Disabled</div></div> 0307 0308 <div class="icons-code"><code><i class="material-icons 0309 md-light md-inactive">face</i></code></div> 0310 0311 <p></div></p> 0312 <p>To set a custom icon color, define a CSS rule specifying the desired color for 0313 the font:</p> 0314 <pre><code>.material-icons.orange600 { color: #FB8C00; } 0315 </code></pre><p>and then use the class when referring to the icon:</p> 0316 <div class="icons-preview-code"> 0317 0318 <div class="icons-preview"><i class="material-icons orange600">face</i><div 0319 class="icon-caption">Normal</div></div> 0320 0321 <div class="icons-code"><code><i class="material-icons 0322 orange600">face</i></code></div> 0323 0324 <p></div></p> 0325 <p><hr></p> 0326 <h1 id="icon-images-for-the-web">Icon images for the web</h1> 0327 <p>Material icons are also available as regular images, both in PNG and SVG 0328 formats.</p> 0329 <h2 id="svg">SVG</h2> 0330 <p>The material icons are provided as SVGs that are suitable for web projects. 0331 Individual icons are downloadable from the <a href="https://www.google.com/design/icons/">material icons library</a>. The SVGs are also available from the material design icons <a href="https://github.com/google/material-design-icons/">git repository</a> under the path:</p> 0332 <pre><code>material-design-icons/*/svg/production/ 0333 </code></pre><p>For example, icons for maps are in <a href="https://github.com/google/material-design-icons/tree/master/maps/svg/production">maps/svg/production</a>:</p> 0334 <pre><code>material-design-icons/maps/svg/production/ 0335 </code></pre><p>If multiple icons are in use on a web site, creating spritesheets out of the 0336 images is recommended. For more information, refer to the documentation in the <a href="https://github.com/google/material-design-icons/tree/master/sprites">sprites directory of the git repository</a>.</p> 0337 <h2 id="png">PNG</h2> 0338 <p>PNG is the most traditional way to display icons on the web. Our downloads from 0339 the <a href="https://www.google.com/design/icons/">material icons library</a> provide both single and double densities for each icon. They are referred to 0340 as <code>1x_web</code> and <code>2x_web</code> respectively in the download. Icons are also available in the git repository 0341 under:</p> 0342 <pre><code>material-design-icons/*/1x_web/ 0343 material-design-icons/*/2x_web/ 0344 </code></pre><p>If multiple icons are in use on a web site, creating spritesheets out of the 0345 images is recommended. For more information, refer to recommendations in the <a href="https://github.com/google/material-design-icons/tree/master/sprites">sprites directory in the git repository</a>.</p> 0346 <p><hr></p> 0347 <h1 id="icons-for-android">Icons for Android</h1> 0348 <p>PNGs suitable for Android are available from the <a href="https://www.google.com/design/icons/">material icons library</a>. These come in all the supported screen densities so they should look good on 0349 any device.</p> 0350 <p>The icons are also available in the <a href="https://github.com/google/material-design-icons">material design icons git repository</a> in the same combination of colors and sizes named as follows:</p> 0351 <pre><code>*/drawable-{{density}}/ic_{{name}}_{{color}}_{{size}}dp.png 0352 </code></pre><p>A density-independent VectorDrawable is provided which is supported from 0353 Android Lollipop and later:</p> 0354 <pre><code>*/drawable-anydpi-v21/ic_{{name}}_black_24dp.xml 0355 </code></pre><p>The Vector Drawable is currently only available as a black 24dp icon. This is 0356 for compatibility with our most standard icon size. To render the icon in a 0357 different color, use <a href="https://developer.android.com/training/material/drawables.html">drawable tinting available on Android Lollipop</a>.</p> 0358 <p>When using the Vector Drawable, it may not be necessary to include the xxxhdpi 0359 density PNG since it is unlikely a device supporting that screen density does 0360 not support Vector Drawables.</p> 0361 <p><hr></p> 0362 <h1 id="icons-for-ios">Icons for iOS</h1> 0363 <p>Material icons also work well within iOS apps. In both the <a href="https://www.google.com/design/icons/">material icons library</a> and <a href="http://github.com/google/material-design-icons/">git repository</a>, these icons are packaged up in <a href="https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/AddingImageSets.html">Xcode imagesets</a> which will work easily with <a href="https://developer.apple.com/library/mac/recipes/xcode_help-image_catalog-1.0/Recipe.html">Xcode Asset Catalogs</a> (xcassets). These imagesets can be added to any Xcode Asset Catalogs by 0364 dragging them into Xcode on to the asset catalog or by copying the folder into 0365 the xcasset folder.</p> 0366 <div class="img"><img src="www/images/ios-imageset.png" alt="alt text"></div> 0367 0368 <p>The imageset contains the single, double and triple density images (1x, 2x, 3x) 0369 so they work on all known iOS screen densities. Both black and white icons are 0370 provided, but we recommend using <a href="https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIImage_Class/#//apple_ref/occ/instm/UIImage/imageWithRenderingMode:">UIImage's imageWithRenderingMode</a> with <a href="https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIImage_Class/#//apple_ref/c/tdef/UIImageRenderingMode">UIImageRenderingModeAlwaysTemplate</a> which will allow the image to be used as an alpha mask that can be tinted to 0371 any possible color.</p> 0372 <p>Objective-C example:</p> 0373 <pre><code>UIButton *button = [[UIButton alloc] init]; 0374 UIImage *closeImage = 0375 [[UIImage imageNamed:@"ic_close"] 0376 imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; 0377 button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f]; 0378 [button setImage:closeImage forState:UIControlStateNormal]; 0379 </code></pre><p>Swift Example:</p> 0380 <pre><code>let button = UIButton() 0381 let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode( 0382 UIImageRenderingMode.AlwaysTemplate) 0383 button.tintColor = UIColor(white:0, alpha:0.54) 0384 button.setImage(closeImage, forState:UIControlState.Normal) 0385 </code></pre> 0386 0387 </div><!-- page-inner-container --> 0388 </div><!-- page-container --> 0389 <!-- footer --> 0390 <footer> 0391 <div class="logo"><a href="https://www.google.com/"><img class="google-logo" alt="Google" src="www/images/google-logo.png"></a></div> 0392 <div class="links right"> 0393 <a href="https://www.google.com/intl/en/about/">About</a><span class="dot">·</span> 0394 <a href="https://www.google.com/intl/en/policies/">Privacy & Terms</a> 0395 </div> 0396 </div> 0397 </footer> 0398 <script> 0399 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 0400 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 0401 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 0402 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 0403 0404 ga('create', 'UA-51798601-4', 'auto'); 0405 ga('send', 'pageview'); 0406 0407 </script> 0408 </body> 0409 </html>