Here we will learn google material icons with example, google material design icons setup, change style / color of material icons, change size / font size of google material icons with example.
Material design icons are introduced by Google under material design guidelines and these icons are simple, modern, scalable, and sometimes quirky. We can change the style / color / position of material icons easily by using css properties.
To setup Google Material icons we don’t need to include any script files just by adding single CSS file to our website we can use all Google Font icons.
To use Google Material icons in web site please copy & paste following css file into the <head> section of your website.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Once we add above CSS file to our website the material icons CSS will be called to activate the Material Icons font specific to the browser.
We need to add material-icons css class to an inline element <i> or <span> tag and insert the icon's name to render these icons from the web font. Here is small example to show face icon.
<i class="material-icons">face</i>
Google material icons are designed to use with inline elements <i> or <span>. The <i> or <span> elements are widely used for these icons. Following example shows how to use material icons in website.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">face</i>
<i class="material-icons">alarm</i>
<i class="material-icons">android</i>
</body>
</html>
If you observe above example we added three icons those are user face, alarm and android. Now we will run and see the output.
Following is the result of google material icons example.
We can change the style of icons like increasing font size, color, etc. using CSS properties that would be like as shown below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">important_devices</i>
<i class="material-icons" style="font-size:40px;">important_devices</i>
<i class="material-icons" style="font-size:50px;color:blue">important_devices</i>
</body>
</html>
If you observe above example we are changing style of icons by increasing font size and changing the color of icon.
Following is the result of changing the style of google material icons.
By default material design icons size will be 24px in case if we want to change icons font size we can change to any size but in accordance with material design icons guidelines, recommend sizes will be either 18, 24, 36 or 48px. Following example shows how to use different sizes for icons.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style type="text/css">
/*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; }
</style>
</head>
<body>
<i class="material-icons md-18">important_devices</i>
<i class="material-icons md-24">important_devices</i>
<i class="material-icons md-36">important_devices</i>
<i class="material-icons md-48">important_devices</i>
</body>
</html>
If you observe above example we are changing material icons size by defining font-size in classes.
Following is the result of changing the size of google material icons example.
This is how we can use google material icons in web applications and we can customize the icons by using css properties based on our requirements.