kojiokanoのブログ

コーディング業務で困ったところをまとめています。

mdlアイコンの使い方例

hamlのhead内で↓を読み込む

= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css", 'data-turbolinks-track' => true
= stylesheet_link_tag "//fonts.googleapis.com/icon?family=Material+Icons", 'data-turbolinks-track' => true

----------------------------------------------------------------------------------

style.sassでアイコンを表示させたいクラスのbeforeかafterを指定する↓

 

&::before
  +vender(display, flex)
  align-items: center
  +material-icons
  content: 'navigate_next'
  font-size: 35px
  color: #fff
  +vender(transition, .2s)

------------------------------------------------------------------------------------

mixin.sassにmaterial-iconを使うためのコードを書く↓

 

=material-icons
font-family: 'Material Icons'
-webkit-font-smoothing: antialiased
text-rendering: optimizeLegibility
-moz-osx-font-smoothing: grayscale
font-feature-settings: 'liga'