What are material icons? Material Icons are Simple, Modern, and Friendly Design System Icons.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.
Icon font for the web
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:
- 900+ icons all from a single, small file.
- Served from Google Web Font servers or can be self hosted.
- Supported by all modern web browsers.
- Colored, sized and positioned entirely with CSS.
- Vector-based: Looks great at any scale, retina displays, low-dpi display screens.
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.
Setup Method 1. Using via Google Web Fonts
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:
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.
Setup Method 2. Self hosting
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:
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; 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'); }
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:
.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'; }
Using the icons in HTML
It’s easy to incorporate icons into your web page. Here’s a small example:
face
<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.
<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.
Source:
https://google.github.io/material-design-icons/#icon-font-for-the-web
https://material.io/icons/
https://material.io/icons/