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!

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/