Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.

Blogr-AMP for Apply Material Icons

Blogr-AMP for Apply Material Icons
Theme Version: 1-0-0 & below...

Over 900 Material system icons is included with Blogr-AMP Blogger template with Accelerated Mobile Pages HTML provided by Google's Material Icons fonts.

Material icons are beautifully crafted, delightful, & easy to use in your web, Android, and iOS projects. Learn more about material design and our process for making these icons in the system icons section of the material design guidelines. Add icons as web font easily!

Blogger Template AMP Material Design Icons Tutorial


Template HTML - amp-custom

Font Library

<link href="" rel="stylesheet" type="text/css"/>

Font style

.material-icons, .md-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;


  • Displays web icons using Material icons application & methods.
  • Add material-icons or md-icons class name to any DOM element with pre-assigned text to display icons of choice.
  • Apply class name md-18, md-24, md-36 to re-scale icons in proportion to text/font size.

Example Usages

An example mark-up use with preferred <i> or <span> tag.

<i class='material-icons'>{{pre-assigned-icon-text}}</i>


<span class='md-icons'>{{pre-assigned-icon-text}}</span>

Replace {{pre-assigned-icon-text}} with the assigned Material Icons markup.

Working environment usages

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

Displays this icon: android

Icons Sizing

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

Displays this small sized icon: android

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

Displays this medium sized icon: android

<i class="material-icons md-36">android</i> or <i class="md-icons md-36">android</i>

Displays this larger sized icon: android

Applying Icons

  1. Go to Material Design - Material Icons webpage:
  2. Search for your icons.
  3. Click on the icons to select.
  4. At fly-out Use Icon in Your Site - copy the supplied mark-up/codes
  5. At your blog page HTML Mode - paste the codes.
  6. Save your work.

Useful Reference

Material Icons system icons section -
Material Icons design guidelines -

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsMaterial system icons usages by Google's Material Designs add or include web icons easily using simple HTML on any Blogger pages/posts. Blogr-AMP also includes pre-assigned icons size classes to re-size icons accordingly.Blogr-AMP: Blogr-AMP for Apply Material Icons
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Over 900 Material system icons is included with Blogr-AMP Blogger template with Accelerated Mobile Pages HTML provided by Google's Mater....

Topics You Might Be Interested...

Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Follow us on Instagram

More from Instagram...


Ooops! We're having trouble connecting...