Material Design Icons: Sizing Icons and New Outlined, Shape and More Styles

What are Material Icons

Material design icons is a open project by Google. They are system, they are simple, modern, friendly, and easy to use. Each icon is created using material design system guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI.

Getting material icons for web

The easiest way to set up icon fonts for use in any web page is via Google Web Fonts. Add the following code into the <head></head> section:

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

Add then to incorporate icons into your web page, add the following icon code into the <body></body> section.

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

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

You can see the full set of material design icons in the Material Icons Library.

Material icons uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name, it's different from Font Awesome Icons.

How to sizing material icons

Material icons inherit the font-size of their parent container which allow them to match any text you might use with them. With the following classes, we can increase or decrease the size of icons relative to that inherited font-size.

camera_alt camera_alt camera_alt camera_alt camera_alt camera_alt

<i class="material-icons md-18">camera_alt</i>
<i class="material-icons md-24">camera_alt</i>
<i class="material-icons md-36">camera_alt</i>
<i class="material-icons md-48">camera_alt</i>
<i class="material-icons md-64">camera_alt</i>
<i class="material-icons md-128">camera_alt</i>

CSS

.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; }
.material-icons.md-64 { font-size: 64px; }
.material-icons.md-128 { font-size: 128px; }

Material icons look best at 24px, but if an icon needs to be displayed in an alternative size, using the above CSS rules.

size code
camera_alt
24px
<i class="material-icons md-24">camera_alt</i>
camera_alt
36px
<i class="material-icons md-36">camera_alt</i>

Using the icon font allows for easy styling of an icon in any color, here is another example for about coloring icons.

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
color code
face <i class="material-icons md-dark">face</i>
face
Inactive
<i class="material-icons md-dark md-inactive">face</i>

How to use material icons outlined, rounded, two Tone, and sharp themes

Material Icons they are available in five themes: Filled(baseline), Outlined, Shape, Rounded, Two-tone, Filled theme is a default theme. All icon themes can work via Google Web Fonts.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

And then adding the correct class to the icon of a particular theme.

<i class="material-icons">photo_camera</i>
<i class="material-icons-outlined">photo_camera</i>
<i class="material-icons-two-tone">photo_camera</i>
<i class="material-icons-sharp">photo_camera</i>
<i class="material-icons-round">photo_camera</i>
theme code
<i class="material-icons">photo_camera</i>
outline <i class="material-icons-outlined">photo_camera</i>
two-tone <i class="material-icons-two-tone">photo_camera</i>
round <i class="material-icons-round">photo_camera</i>
sharp <i class="material-icons-sharp">photo_camera</i>
Live Code: