Google’s material icons
Disclaimer: Should you by chance happen on this page, please note that I take no credit for the ingenuity that goes into most of it. At points I have shamelessly copied and pasted for my own convenience. My own archive built into some kind of system. It is all about memory and forgetfullness, really. There are too many things to remember; not only the things to remember by themselves but also where I originally found the information I copied. In this process I should of course have used more of my own words to avoid possible intellectual rights infringements. I reference sources, however, and encourage you to visit those origins for details and embellishments. So there.
The icons
Material icons are delightful, beautifully crafted symbols for common actions and items. (Google)
While the material icons are also available as individual SVGs and PNGs, my focus here is on their use as icons packaged into a single font for seemless integration with text. Each symbol is available in five themes – filled (aka baseline), outlined, rounded, two-toned and sharp – and a host of categories is covered. For my own dabbling I will play with the filled version of the Monochrome Photos icon:
The library
The complete library of icons is available on Google Fonts and GitHub and is free for all to use; either (easy) by linking to Google’s external repository or (less easy) as a self-hosted (aka downloaded) resource. I aim for the latter because I need to use it on a tablet kiosk which is not connected to the Internet.
CSS
The Material Icons Guide promises to covers all aspects of implementation but there are inconsistencies between the font files one should reference in CSS and the actual font files incorporated in the latest update (4.0.0 as of this writing). The following is Google’s recommended CSS rule:
@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');
}The problem here is that only the TTF version is included in the download for the filled version. (The four other themes have OTF counterparts!) It is always discouraging when the landscape does not fit the map. (What else could be missing?)
Sidestepping for a minute here, paraphrasing Thierry Blancpain on web fonts:
Embedded OpenType (EOT) is a legacy format developed by Microsoft.
TrueType (TTF) is an early font format developed by Microsoft and Apple. Modern TTF files are also called TrueType OpenType fonts. TTF can be useful for extending support to some older browsers, especially on mobile.
Web Open Font Format (WOFF) is a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.
Web Open Font Format 2 (WOFF2) is an update to WOFF. Developed by Google, this is considered the best format because it offers smaller file sizes and better performance for modern browsers that support it.
Anyway, that ttf should work with iOS on my iPad so i trudge along, coding as follows:
@font-face {
font-family: "Material icons";
src: url("...[path].../MaterialIcons-Regular.ttf") format("truetype"); /* Local path */
font-style: normal;
font-weight: 400;
}Now, according to Google, to render the font properly, the following rule must be declared in 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;
-webkit-font-smoothing: antialiased; /* Support for all WebKit browsers */
text-rendering: optimizeLegibility; /* Support for Safari and Chrome */
-moz-osx-font-smoothing: grayscale; /* Support for Firefox */
font-feature-settings: 'liga'; /* Support for IE */
}Removing obvious default values and stuff I do not need in Safari on an iPad, my own code is:
.materialIcons {
font: 24px/1 "Material icons"; /* Recommended sizes are 18, 24, 36 or 48, the default being 24 */
display: inline-block;
}Please note that my coding preferences have sneaked/snuck in.
A note on font smoothing
Thierry Blancpain explains:
“While hinting information included in the font files is mostly being ignored on MacOS, specific browsers offer some additional control over font rendering:
p {
-webkit-font-smoothing: antialiased; /* Chrome, Safari */
-moz-osx-font-smoothing: grayscale; /* Firefox */
}“Using these CSS properties leads to sharper, thinner text rendering on MacOS and iOS. But beware: This can also lead to rendering problems, especially if you are already using a thin font or font weight.
“Both antialiased and grayscale are mainly useful to balance the rendering of fonts when using light text on dark backgrounds, as they would otherwise get rendered quite a bit bolder.
“The font-smoothing property and its values are not on the path to become a standard CSS feature, so use it with caution and perhaps only in contexts where you know you need to target a specific browser and context.”
HTML
To spec icons on a web page, consider the following:
<span class="materialIcons">monochrome_photos</span>Fig. 1. The Monochrome Photos icon in all its vectorized 48px glory. The visualizing outline measures 48x48.
This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name, in this case monochrome_photos. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference. And, ligatures are supported in most modern browsers on both desktop and mobile devices.
Sizing
Although the icons in the font can be scaled to any size, Google recommends them to be shown in either 18, 24, 36 or 48px. The default is 24px which is also considered to be the best looking.
Colouring
Icon fonts allow for easy styling of an icon in any colour. For active icons it is recommended to use 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, use black at 26% or white at 30% for light and dark backgrounds, respectively.
Fig. 2. Left: Black 54% opaque. Right: Black 26% opaque.
Fig. 3. Left: White 100%. Right: White 30% opaque.
Fig. 4. It would be rude to ask the Monochrome Photos icon to show itself in colour. Stepping up to the plate, welcome the Palette icon.
Codepoints
If a browser does not support ligatures, fall back to specifying an icon using its numeric character reference:
<span class="materialIcons"></span>Fig. 5. The Monochrome Photos icon rendered using its e403 codepoint.
Numeric characters can be found in the material icons library or in the codepoints file delivered with the font. (Open the latter in a plain text editor.)
Hover
To put the Monochrome Photos symbol to (somewhat) good use, hover over the icon below with a mouse or another pointing device. Note that there is a snippet of JavaScript involved, too.
A note on line height
Fonts are notoriously difficult to position exactly on a web page. You do not have to take my word for it, but seriously…
…the CSS line-height property doesn’t have an inherent concept of baseline, and each line of text is placed roughly in the middle of the element’s total height. This means that perfectly aligning the actual base of your text (which is to say the baseline) across different styles and fonts requires … manual, time-consuming tweaking and pixel nudging. (Espen Brunborg 2012)
So, if absolute placement is necessary with a material icon, consider using the SVG version.
Update 210329: After spending some time with Google’s material icons, I shy away from them in favour of in-line SVG. Please see my Masking video artefacts article for details.