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

<div class="text_area">

<h2>様々なアイコン</h2>
<span class="material-icons">face</span>
<span class="material-icons">android</span>
<span class="material-icons">thumb_up_off_alt</span>
<span class="material-icons">location_on</span>
<span class="material-icons">downhill_skiing</span>
<span class="material-icons">soap</span>
  
<h2>サイズはfont-sizeで指定</h2>
<span class="material-icons size18">face</span>
<span class="material-icons size24">face</span>
<span class="material-icons size36">face</span>
<span class="material-icons size48">face</span>

<h2>色はcolorで指定</h2>
<span class="material-icons color_red">face</span>
<span class="material-icons color_blue">face</span>
<span class="material-icons color_green">face</span>
 
<h2>文中にアイコンを入れてみる</h2>
<p class="text1">文章中にアイコンを入れると<span class="material-icons size_in_text">pets</span>このような表示になります。
</p>

<h2>ボタンの矢印にアイコンに使ってみる</h2>
<div class="btn">ボタン
<span class="material-icons">chevron_right</span>
</div>

</div><!-- /.test_area -->

/* サイズ指定 */
.material-icons.size18{font-size:18px;}
.material-icons.size24{font-size:24px;}
.material-icons.size36{font-size:36px;}
.material-icons.size48{font-size:48px;}

/* 色指定 */
.material-icons.color_red{color:red;}
.material-icons.color_blue{color:blue;}
.material-icons.color_green{color:green;}

/* テキストとサイズ合わせ */
p.text1{font-size:16px;}
p.text1 .material-icons.size_in_text{font-size:16px;}

/* ボタンデザイン */
div.btn{
  position:relative;
  width:300px;
  padding:20px;
  background-color:#274da3;
  border-radius:10px;
  text-align:center;
  color:white;
  cursor:pointer;
}
div.btn span.material-icons{
  position:absolute;
  top:0;
  bottom:0;
  right:20px;
  margin:auto;
  font-size:30px;
  height:30px;
}

/* 以下テストスペース設定 */
div.text_area{
  max-width:600px;
  margin:0 auto;
}
h2{
  font-size:16px;
  font-weight:normal;
  border-top:solid 1px lightgray;
  margin:20px 0 0 0;
  padding:5px 0;
}