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

Blogr-AMP for Apply Material Icons

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

Location


Template HTML - amp-custom

Font Library

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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;
}

Behavior



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

OR

<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: https://material.io/icons/
  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 - https://design.google.com/spec/style/icons.html#icons-system-icons
Material Icons design guidelines - https://design.google.com/spec/

Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

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

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

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Material 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 Blogr-AMP for Apply Material Icons.

MOBILE TEST by GOOGLE launch VALIDATE AMP launch
mail