mirror of
https://github.com/google/material-design-icons.git
synced 2026-02-19 16:41:42 +01:00
Redirect to Icons Guide on developers.google.com
This commit is contained in:
Nathan Williams
543
index.html
543
index.html
@@ -1,541 +1,10 @@
|
||||
<html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, width=device-width"/>
|
||||
<link href="//fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" type="text/css" href="www/css/material.css">
|
||||
<title>Material Icons Guide - Google Design</title>
|
||||
|
||||
<!-- Google Analytics, modern browser version (degrades for IE9 and under) -->
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-51798601-4', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<style type="text/css">
|
||||
.fix-table {
|
||||
display: table !important;
|
||||
}
|
||||
.fix-table div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.fix-table .material-icons {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
<title>Material Icons Guide</title>
|
||||
<meta http-equiv="refresh" content="0;URL='https://developers.google.com/fonts/docs/material_icons'" />
|
||||
</head>
|
||||
<body class="icons-docs">
|
||||
<header>
|
||||
<div class="header-wrapper">
|
||||
<div class="header-title">
|
||||
<span class="section-title">Material Icons Guide</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="page-container">
|
||||
<div id="page-inner-container">
|
||||
<p>An overview of material icons—where to get them and how to integrate them with your projects.</p>
|
||||
|
||||
<nav class="toc">
|
||||
<h1>Contents</h1>
|
||||
<ul>
|
||||
<li><a href="#what-are-material-icons-">What are material icons?</a></li>
|
||||
<li><a href="#getting-icons">Getting the icons</a></li>
|
||||
<li><a href="#icon-font-for-the-web">Icon fonts for the web</a></li>
|
||||
<li><a href="#icon-images-for-the-web">Icon images for the web</a></li>
|
||||
<li><a href="#icons-for-android">Icons for Android</a></li>
|
||||
<li><a href="#icons-for-ios">Icons for iOS</a></li>
|
||||
<li><a href="#icons-in-rtl">Icons in RTL</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h1 id="what-are-material-icons">What are material icons?</h1>
|
||||
<p>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.</p>
|
||||
<p>See the full set of material design icons in the <a href="https://www.google.com/design/icons/">Material Icons Library</a>.</p>
|
||||
<div class="img"><a href="https://www.google.com/design/icons/"><img src="www/images/icons-library.png" alt="icons library"></a></div>
|
||||
|
||||
<h1 id="getting-icons">Getting icons</h1>
|
||||
<p>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.</p>
|
||||
<h2 id="licensing">Licensing</h2>
|
||||
<p>We have made these icons available for you to incorporate them into your
|
||||
products under the <a href="http://www.apache.org/licenses/LICENSE-2.0.txt">Apache License Version 2.0</a>. Feel free to remix and re-share these icons and documentation in your
|
||||
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
|
||||
the icons themselves.</p>
|
||||
<h2 id="browsing-and-downloading-individual-icons">Browsing and downloading individual icons</h2>
|
||||
<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
|
||||
suitable for web, Android, and iOS projects or for inclusion in any designer
|
||||
tools.</p>
|
||||
<h2 id="downloading-everything">Downloading everything</h2>
|
||||
<p>Grab the <a href="https://github.com/google/material-design-icons/releases/download/3.0.1/material-design-icons-3.0.1.zip">latest stable zip archive</a> (~60MB) of all icons or the <a href="https://github.com/google/material-design-icons/archive/master.zip">bleeding-edge version from master.</a></p>
|
||||
<h2 id="git-repository">Git Repository</h2>
|
||||
<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
|
||||
are making available.</p>
|
||||
<pre><code class="lang-shell">$ git clone http://github.com/google/material-design-icons/
|
||||
</code></pre>
|
||||
<h2 id="installing-icons-from-bower">Installing icons from bower</h2>
|
||||
<p>Install the icons using the <a href="http://bower.io/">Bower</a> package manager.</p>
|
||||
<pre><code>$ bower install material-design-icons
|
||||
</code></pre><h2 id="installing-icons-from-npm">Installing icons from npm</h2>
|
||||
<p>Install the icons using <a href="http://npmjs.com/">npm</a> package manager.</p>
|
||||
<pre><code>$ npm install material-design-icons
|
||||
</code></pre><p><hr></p>
|
||||
<h1 id="icon-font-for-the-web">Icon font for the web</h1>
|
||||
<p>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.</p>
|
||||
<p>Using the font is not only the most convenient method, but it is efficient and
|
||||
looks great:</p>
|
||||
<ul>
|
||||
<li>900+ icons all from a single, small file.</li>
|
||||
<li>Served from Google Web Font servers or can be self hosted.</li>
|
||||
<li>Supported by all modern web browsers.</li>
|
||||
<li>Colored, sized and positioned entirely with CSS.</li>
|
||||
<li>Vector-based: Looks great at any scale, retina displays, low-dpi display
|
||||
screens.</li>
|
||||
</ul>
|
||||
<p>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.</p>
|
||||
<h2 id="setup-method-1-using-via-google-web-fonts">Setup Method 1. Using via Google Web Fonts</h2>
|
||||
<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>
|
||||
<pre><code><link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
</code></pre><p>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 <code>.material-icons</code>.
|
||||
Any element that uses this class will have the correct CSS to render these icons from the web font.</p>
|
||||
<h2 id="setup-method-2-self-hosting">Setup Method 2. Self hosting</h2>
|
||||
<p>For those looking to self host the web font, some additional setup is necessary.
|
||||
Host the <a href="https://github.com/google/material-design-icons/tree/master/font">icon font</a> in a location, for example <code>https://example.com/material-icons.woff</code> and add the
|
||||
following CSS rule:</p>
|
||||
<pre><code class="lang-css">@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<p>In addition, the CSS rules for rendering the icon will need to be declared to
|
||||
render the font properly. 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:</p>
|
||||
<pre><code class="lang-css">.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
</code></pre>
|
||||
<h2 id="using-the-icons-in-html">Using the icons in HTML</h2>
|
||||
<p>It’s easy to incorporate icons into your web page. Here’s a small example:</p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons">face</span></div>
|
||||
|
||||
<div class="icons-code"><code><span
|
||||
class="material-icons">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<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>
|
||||
<p>This feature is supported in most modern browsers on both desktop and mobile
|
||||
devices.</p>
|
||||
<table class="fix-table">
|
||||
<tr>
|
||||
<td><strong>Browser</strong></td>
|
||||
<td><strong>Version supporting ligatures</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Google Chrome</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mozilla Firefox</td>
|
||||
<td>3.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apple Safari</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Microsoft IE</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Microsoft Edge</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Opera</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apple MobileSafari</td>
|
||||
<td>iOS 4.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Android Browser</td>
|
||||
<td>3.0</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p>For browsers that do not support ligatures, fall back to specifying the icons
|
||||
using numeric character references like the example below:</p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons"></span></div>
|
||||
|
||||
<div class="icons-code"><code><span
|
||||
class="material-icons">&#xE87C;</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<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. Each icon font has a codepoints index in our git repository showing the complete set of names and character codes (<a href="https://github.com/google/material-design-icons/tree/master/font">here</a>).</p>
|
||||
<h2 id="styling-icons-in-material-design">Styling icons in material design</h2>
|
||||
<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>
|
||||
<pre><code>/* Rules for sizing the icon. */
|
||||
.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; }
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
|
||||
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
|
||||
|
||||
/* 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); }
|
||||
</code></pre><h3 id="sizing">Sizing</h3>
|
||||
<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
|
||||
24px.</p>
|
||||
<p>CSS rules for the standard material design sizing guidelines:</p>
|
||||
<pre><code>.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; }
|
||||
</code></pre><p>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:</p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons md-18">face</span><div
|
||||
class="icon-caption">18px</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-18">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons md-24">face</span><div
|
||||
class="icon-caption">24px</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-24">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons md-36">face</span><div
|
||||
class="icon-caption">36px</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-36">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons md-48">face</span><div
|
||||
class="icon-caption">48px</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-48">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<h3 id="coloring">Coloring</h3>
|
||||
<p>Using the icon font allows for easy styling of an icon in any color.
|
||||
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
|
||||
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.</p>
|
||||
<p>Here are some examples, using the material CSS styles described above:</p>
|
||||
<pre><code>.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); }
|
||||
</code></pre><p>Example for drawing an icon on a light background with a dark foreground color:</p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons md-dark">face</span><div
|
||||
class="icon-caption">Normal</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-dark">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons md-dark
|
||||
md-inactive">face</span><div class="icon-caption">Disabled</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-dark md-inactive">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<p>Example for drawing an icon on a dark background with a light foreground color:</p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview icons-dark-bg"><span class="material-icons
|
||||
md-light">face</span><div class="icon-caption">Normal</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-light">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview icons-dark-bg"><span class="material-icons md-light
|
||||
md-inactive">face</span><div class="icon-caption">Disabled</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
md-light md-inactive">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<p>To set a custom icon color, define a CSS rule specifying the desired color for
|
||||
the font:</p>
|
||||
<pre><code>.material-icons.orange600 { color: #FB8C00; }
|
||||
</code></pre><p>and then use the class when referring to the icon:</p>
|
||||
<div class="icons-preview-code">
|
||||
|
||||
<div class="icons-preview"><span class="material-icons orange600">face</span><div
|
||||
class="icon-caption">Normal</div></div>
|
||||
|
||||
<div class="icons-code"><code><span class="material-icons
|
||||
orange600">face</span></code></div>
|
||||
|
||||
<p></div></p>
|
||||
<p><hr></p>
|
||||
<h1 id="icon-images-for-the-web">Icon images for the web</h1>
|
||||
<p>Material icons are also available as regular images, both in PNG and SVG
|
||||
formats.</p>
|
||||
<h2 id="svg">SVG</h2>
|
||||
<p>The material icons are provided as SVGs that are suitable for web projects.
|
||||
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>
|
||||
<pre><code>material-design-icons/*/svg/production/
|
||||
</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>
|
||||
<pre><code>material-design-icons/maps/svg/production/
|
||||
</code></pre><p>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 <a href="https://github.com/google/material-design-icons/tree/master/sprites">sprites directory of the git repository</a>.</p>
|
||||
<h2 id="png">PNG</h2>
|
||||
<p>PNG is the most traditional way to display icons on the web. Our downloads from
|
||||
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
|
||||
as <code>1x_web</code> and <code>2x_web</code> respectively in the download. Icons are also available in the git repository
|
||||
under:</p>
|
||||
<pre><code>material-design-icons/*/1x_web/
|
||||
material-design-icons/*/2x_web/
|
||||
</code></pre><p>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 <a href="https://github.com/google/material-design-icons/tree/master/sprites">sprites directory in the git repository</a>.</p>
|
||||
<p><hr></p>
|
||||
<h1 id="icons-for-android">Icons for Android</h1>
|
||||
<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
|
||||
any device.</p>
|
||||
<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>
|
||||
<pre><code>*/drawable-{{density}}/ic_{{name}}_{{color}}_{{size}}dp.png
|
||||
</code></pre><p>A density-independent VectorDrawable is provided which is supported from
|
||||
Android Lollipop and later:</p>
|
||||
<pre><code>*/drawable-anydpi-v21/ic_{{name}}_black_24dp.xml
|
||||
</code></pre><p>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 <a href="https://developer.android.com/training/material/drawables.html">drawable tinting available on Android Lollipop</a>.</p>
|
||||
<p>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.</p>
|
||||
<p><hr></p>
|
||||
<h1 id="icons-for-ios">Icons for iOS</h1>
|
||||
<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
|
||||
dragging them into Xcode on to the asset catalog or by copying the folder into
|
||||
the xcasset folder.</p>
|
||||
<div class="img"><img src="www/images/ios-imageset.png" alt="alt text"></div>
|
||||
|
||||
<p>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 <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
|
||||
any possible color.</p>
|
||||
<p>Objective-C example:</p>
|
||||
<pre><code>UIButton *button = [[UIButton alloc] init];
|
||||
UIImage *closeImage =
|
||||
[[UIImage imageNamed:@"ic_close"]
|
||||
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
|
||||
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
|
||||
[button setImage:closeImage forState:UIControlStateNormal];
|
||||
</code></pre><p>Swift Example:</p>
|
||||
<pre><code>let button = UIButton()
|
||||
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
|
||||
UIImageRenderingMode.AlwaysTemplate)
|
||||
button.tintColor = UIColor(white:0, alpha:0.54)
|
||||
button.setImage(closeImage, forState:UIControlState.Normal)
|
||||
</code></pre><p><hr></p>
|
||||
<h1 id="icons-in-rtl">Icons in RTL</h1>
|
||||
<p>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.</p>
|
||||
<p>Icons should only be mirrored if their direction matches other UI elements in RTL mode. When an icon represents visual features of your website that are different in RTL, then the icon should also be mirrored in RTL. For example, if the numbers in a numbered list are on the right side in the RTL language, then the numbers should be on the right side of the mirrored icon.</p>
|
||||
<p>Note: Icons that include a question mark need to be mirrored in Arabic and Farsi, but not in Hebrew.
|
||||
For an in-depth guidance on this topic, please read the <a href="https://material.io/guidelines/usability/bidirectionality.html">Bidirectionality material design spec article</a>.</p>
|
||||
<h2 id="rtl-icons-on-android">RTL icons on Android</h2>
|
||||
<p><a href="https://developer.android.com/about/versions/android-4.2.html#RTL">This Android developer article</a> 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.</p>
|
||||
<p>To provide specialized assets for RTL languages, you can use the <code>ldrtl</code> qualifier on resource directories, such as <code>res/drawable-ldrtl/</code>. Resources inside such directories will only be used for RTL languages. For devices running Android API 19 or newer, the framework also provides the <a href="https://developer.android.com/about/versions/android-4.4.html#DrawableMirroring">autoMirrored attribute</a> for Drawables. When this attribute is set to true, the drawable will be automatically mirrored on RTL languages.</p>
|
||||
<p>Using autoMirrored:</p>
|
||||
<pre><code><vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24.0"
|
||||
android:viewportHeight="24.0"
|
||||
android:tint="?attr/colorControlNormal"
|
||||
android:autoMirrored="true">
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
|
||||
8 1.41,-1.41L7.83,13H20v-2z"/>
|
||||
</vector>
|
||||
</code></pre><p>If using autoMirrored or providing alternate Drawable resources isn’t an option, the ImageView scaleX attribute can also be used to mirror drawables (for instance, by providing a RTL-specific layout in a <code>res/layout-ldrtl</code> directory).</p>
|
||||
<p>Mirroring within the layout file:</p>
|
||||
<pre><code><ImageView
|
||||
android:id="@+id/my_icon"
|
||||
android:layout_width="60dp"
|
||||
android:layout_height="60dp"
|
||||
android:scaleX="-1" />
|
||||
</code></pre><p>Lastly, drawables can be mirrored programmatically.</p>
|
||||
<p>Manually check for layout direction using <a href="https://developer.android.com/reference/android/support/v4/view/ViewCompat.html#getLayoutDirection%28android.view.View%29">getLayoutDirection</a>:</p>
|
||||
<pre><code>if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
|
||||
// custom code
|
||||
}
|
||||
</code></pre><p>Mirroring ImageView contents programmatically:</p>
|
||||
<pre><code>imageView.setScaleX(-1);
|
||||
</code></pre><h2 id="rtl-icons-on-ios">RTL icons on iOS</h2>
|
||||
<p>iOS has the concept of a <a href="https://developer.apple.com/reference/uikit/uisemanticcontentattribute">UISemanticContentAttribute</a> that is attached to each view. This can be <code>unspecified</code>, <code>forceLeftToRight</code>, <code>forceRightToLeft</code>, <code>playback</code> or <code>spatial</code>. iOS uses this value and the (left-to-right (LTR)/RTL setting of the device presenting the interface to determine the effectiveLayoutDirection of the view. This effectiveLayoutDirection determines whether or not to mirror an image when it is displayed.</p>
|
||||
<p>By default, images' semantic content is set to <code>unspecified</code>. This causes them to be mirrored in RTL mode. If you do not want an icon to ever be mirrored, you need to explicitly set it to be <code>forceLeftToRight</code>. Apple calls out some exceptions that should not be mirrored, such as media playback (Fast Forward, rewind, etc.), musical notes, images indicating the passage of time, etc.</p>
|
||||
<p>Objective-C example:</p>
|
||||
<pre><code>// Prevent an icon from being mirrored in RTL mode
|
||||
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
|
||||
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
|
||||
iconView.semanticContentAttribute =
|
||||
UISemanticContentAttributeForceLeftToRight;
|
||||
</code></pre><p>Swift example:</p>
|
||||
<pre><code>// Prevent an icon from being mirrored in RTL mode
|
||||
let iconImage = UIImage.init(named: "my_icon.png")
|
||||
let iconView = UIImageView.init(image: iconImage)
|
||||
iconView.semanticContentAttribute = .forceLeftToRight;
|
||||
</code></pre><p>For more in-depth documentation on how to implement RTL on iOS and macOS, please review <a href="https://developer.apple.com/library/prerelease/content/documentation/MacOSX/Conceptual/BPInternational/SupportingRight-To-LeftLanguages/SupportingRight-To-LeftLanguages.html">Apple's RTL documentation</a>.</p>
|
||||
<p>Semantic content was added in iOS 9. If you are supporting earlier versions of iOS, the <a href="https://github.com/material-foundation/material-internationalization-ios">material internationalization framework</a> backports some of the functionality to iOS 8.</p>
|
||||
<h2 id="rtl-icons-on-the-web">RTL icons on the web</h2>
|
||||
<p>We recommend the following article as a primer to RTL on the web:
|
||||
<a href="https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1">https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1</a>
|
||||
<a href="https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2">https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2</a></p>
|
||||
<p>By default on the web, icons are not mirrored when the layout direction is mirrored.
|
||||
You need to specifically mirror the <strong>appropriate icons</strong> when needed.</p>
|
||||
<p>The example below shows how to implement a simple RTL CSS rule. You can also <a href="http://codepen.io/MarcoCP/pen/zowbMa">view
|
||||
it on codepen</a>.</p>
|
||||
<p>page.html</p>
|
||||
<pre><code><html dir="rtl">
|
||||
<img class="icon" src="my_icon.png" alt="my icon"/>
|
||||
</html>
|
||||
</code></pre><p>page.css</p>
|
||||
<pre><code>html[dir="rtl"] .icon {
|
||||
-moz-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
filter: FlipH;
|
||||
-ms-filter: "FlipH";
|
||||
}
|
||||
</code></pre><h2 id="generate-your-own-rtl-icons-using-imagemagick">Generate your own RTL icons using ImageMagick</h2>
|
||||
<p>If mirroring the icons in code is not an option you can use <a href="https://www.imagemagick.org">ImageMagick</a> to horizontally mirror the image.</p>
|
||||
<pre><code>convert -flop my_icon.png my_icon_rtl.png
|
||||
</code></pre><h2 id="which-icons-should-be-mirrored-for-rtl-">Which icons should be mirrored for RTL?</h2>
|
||||
<p>Here is a list of icons that can be programmatically mirrored to RTL:</p>
|
||||
<table class="fix-table">
|
||||
<tbody>
|
||||
<tr><td><div><span class="material-icons">arrow_back</span> arrow back</div></td><td><div><span class="material-icons">arrow_back_ios</span> arrow back ios</div></td><td><div><span class="material-icons">arrow_forward</span> arrow forward</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">arrow_forward_ios</span> arrow forward ios</div></td><td><div><span class="material-icons">arrow_left</span> arrow left</div></td><td><div><span class="material-icons">arrow_right</span> arrow right</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">assignment</span> assignment</div></td><td><div><span class="material-icons">assignment_return</span> assignment return</div></td><td><div><span class="material-icons">backspace</span> backspace</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">battery_unknown</span> battery unknown</div></td><td><div><span class="material-icons">call_made</span> call made</div></td><td><div><span class="material-icons">call_merge</span> call merge</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">call_missed</span> call missed</div></td><td><div><span class="material-icons">call_missed_outgoing</span> call missed outgoing</div></td><td><div><span class="material-icons">call_received</span> call received</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">call_split</span> call split</div></td><td><div><span class="material-icons">chevron_left</span> chevron left</div></td><td><div><span class="material-icons">chevron_right</span> chevron right</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">chrome_reader_mode</span> chrome reader mode</div></td><td><div><span class="material-icons">device_unknown</span> device unknown</div></td><td><div><span class="material-icons">dvr</span> dvr</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">event_note</span> event note</div></td><td><div><span class="material-icons">featured_play_list</span> featured play list</div></td><td><div><span class="material-icons">featured_video</span> featured video</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">first_page</span> first page</div></td><td><div><span class="material-icons">flight_land</span> flight land</div></td><td><div><span class="material-icons">flight_takeoff</span> flight takeoff</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">format_indent_decrease</span> format indent decrease</div></td><td><div><span class="material-icons">format_indent_increase</span> format indent increase</div></td><td><div><span class="material-icons">format_list_bulleted</span> format list bulleted</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">forward</span> forward</div></td><td><div><span class="material-icons">functions</span> functions</div></td><td><div><span class="material-icons">help</span> help</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">help_outline</span> help outline</div></td><td><div><span class="material-icons">input</span> input</div></td><td><div><span class="material-icons">keyboard_backspace</span> keyboard backspace</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">keyboard_tab</span> keyboard tab</div></td><td><div><span class="material-icons">label</span> label</div></td><td><div><span class="material-icons">label_important</span> label important</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">label_outline</span> label outline</div></td><td><div><span class="material-icons">last_page</span> last page</div></td><td><div><span class="material-icons">launch</span> launch</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">list</span> list</div></td><td><div><span class="material-icons">live_help</span> live help</div></td><td><div><span class="material-icons">mobile_screen_share</span> mobile screen share</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">multiline_chart</span> multiline chart</div></td><td><div><span class="material-icons">navigate_before</span> navigate before</div></td><td><div><span class="material-icons">navigate_next</span> navigate next</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">next_week</span> next week</div></td><td><div><span class="material-icons">note</span> note</div></td><td><div><span class="material-icons">open_in_new</span> open in new</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">playlist_add</span> playlist add</div></td><td><div><span class="material-icons">queue_music</span> queue music</div></td><td><div><span class="material-icons">redo</span> redo</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">reply</span> reply</div></td><td><div><span class="material-icons">reply_all</span> reply all</div></td><td><div><span class="material-icons">screen_share</span> screen share</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">send</span> send</div></td><td><div><span class="material-icons">short_text</span> short text</div></td><td><div><span class="material-icons">show_chart</span> show chart</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">sort</span> sort</div></td><td><div><span class="material-icons">star_half</span> star half</div></td><td><div><span class="material-icons">subject</span> subject</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">trending_flat</span> trending flat</div></td><td><div><span class="material-icons">toc</span> toc</div></td><td><div><span class="material-icons">trending_down</span> trending down</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">trending_up</span> trending up</div></td><td><div><span class="material-icons">undo</span> undo</div></td><td><div><span class="material-icons">view_list</span> view list</div></td></tr>
|
||||
<tr><td><div><span class="material-icons">view_quilt</span> view quilt</div></td><td><div><span class="material-icons">wrap_text</span> wrap text</div></td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div><!-- page-inner-container -->
|
||||
</div><!-- page-container -->
|
||||
|
||||
<!-- footer -->
|
||||
<footer>
|
||||
<div class="logo">
|
||||
<a href="https://www.google.com/"><img class="google-logo" alt="Google" src="https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_dark_clr_112x36px.svg"></a>
|
||||
</div>
|
||||
<div class="links right">
|
||||
<a href="https://www.google.com/intl/en/about/">About</a><span class="dot">·</span>
|
||||
<a href="https://www.google.com/intl/en/policies/">Privacy & Terms</a>
|
||||
</div>
|
||||
</footer>
|
||||
<body>
|
||||
<p>This page has moved to <a href="https://developers.google.com/fonts/docs/material_icons">
|
||||
developers.google.com/fonts/docs/material_icons</a>.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2554
www/css/material.css
2554
www/css/material.css
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Reference in New Issue
Block a user