Google Material Design Icons Introduction

  Total Views : 227
  Comments : 0
 
  Keywords : Material icons with example, Google material icons font example, Google material design icons tutorial with examples, Google material design icons guide with examples

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.

Google Material Design Icons

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.

Google Material Icons Setup

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.

 

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

Google Material Icons Example

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.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

 

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

<class="material-icons">alarm</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.

Output of Google Material Icons Example

Following is the result of google material icons example.

 

face alarm android

Change Google Mater Icons Style

We can change the style of icons like increasing font size, color, etc. using CSS properties that would be like as shown below.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

 

<class="material-icons">important_devices</i>

<class="material-icons" style="font-size:40px;">important_devices</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.

Output of Google Material Icons Style Change

Following is the result of changing the style of google material icons.

 

important_devices important_devices important_devices

Change Google Material Icons Size

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 182436 or 48px. Following example shows how to use different sizes for icons.

 

Live Preview

<!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>

 

<class="material-icons md-18">important_devices</i>

<class="material-icons md-24">important_devices</i>

<class="material-icons md-36">important_devices</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.

Output of Google Material Icons Size Change

Following is the result of changing the size of google material icons example.

 

important_devices important_devices important_devices important_devices

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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User