In this guide your are going to learn how to embed google’s material design icons to your website in simple, quick and easy steps.
Before we start let’s talk a little bit about Google’s Material Design Icons
What are Google’s Material Design Icons
Google’s Material Design Icons are set of variety of icons that follow Google’s design guidelines. They ensure better readability and clarity at different sizes, “They have been optimized for beautiful display on all common platforms and display resolutions”.
Licensing
The license for these icons is Apache License Version 2.0, which gives you freedom to use them in your designs, embed them in your website, share them.
Setup
Method 1: Via Google Web Fonts
This is considered the easiest way.
- First, add the following line of code to your website’s HTML file
HTML
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">- Now, you can use the icons by putting the desired icon’s textual name inside an element, that element must have its class set to “
material-icons“, just in the following example:
HTML
<span class="material-icons">keyboard</span>And this is the result:
Advertisment
Method 2: Self hosting the font file
- You can download the font files and host them in a location on your website, for example you can put it in folder named
fontsas the same location as the HTML file. - Add the following CSS rules and change the path inside the braces of every
urlfunction according to your setup:
CSS
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(fonts/MaterialIcons-Regular.woff) format('woff'),
url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.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';
}- Now you can use the icons the same way as in method 1.
Further info
- The method by which you can call the icon by its textual name is called ligatures. This feature is supported in most modern browsers. However, if your browser dose not support ligatures, you should specify the icon using numeric character references just like in the example below:
HTML
<span class="material-icons"></span>- You can style the icons, change the size and color using CSS, for more information read the official guide.
- To browse the Google’s Material Icons, find their names and end points, visit this link.
Share
Other articles you may find interesting
Description: Cool glowing animated frame, can be used to indicate activation or as click ripple effect Dependencies: None Mobile support:…
Description: Animated dot spinning around a word that can be used as animated logo or as a loader. Dependencies: None…
Description: Calendar month view that just resembles Window 10’s calendar appearance and animations. Dependencies: JQuery Mobile support: No License: MIT…
Sometimes you need to test your Ethernet cable either to make sure it is working correctly before setup or to…
In general, network switches are the main building block of wired computer networks. It’s the networking hardware that connects other…
ESP32 development board can be used as WiFi router/repeater with NAT(Network Address Translation), thanks to martin-ger, who developed this great…
Advertisment