Google材料アイコンを統合する方法

Material Icons are simple, modern and friendly icons, created using the Google Material Design guidelines. The guidelines ensure readability and clarity on different sizes and the icons are optimized for all common platforms and display resolutions.

You have several options to use the Material Icons. You can download a few or download the entire library.

The easiest way to set up material icon fonts for any web page is through Google Web Fonts. Just include this line in your index.html or root html file:

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

If you want 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. This additional CSS is only needed, when self hosting, when using via Google Web Fonts this stylesheet is included.

.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';
}

After installing it, it’s very easy to add icons into your web page. For example:

face

<span class="material-icons">face</span>

• Google Material Icons are optimized for all common platforms and display resolutions.
• The Material Icons be integrated via Google Web Fonts or self hosting.
• Material Icons have a small package size and scale great (SVG).