md-button

FAB

FAB

FAB是浮起来的Button

<md-button class="md-fab" aria-label="FAB">
    <md-icon class="material-icons">add</md-icon>
</md-button>

固定右下

  #fab {
    position: fixed;
    right: 3em;
    bottom: 3em;
  }

取消圆角

https://material.angularjs.org/latest/CSS/button
当有多个选择器时，id的优先级是最高的

<md-button id="btn">**</md-button>
<style>
  #btn {
    border-radius: 0 0 0 0;
  }
</style>

平铺窗口

layout-fill

<md-button layout-fill>***</md-button>

Material Icons

css:

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: local('Material Icons'), local('MaterialIcons-Regular'),
   url(MaterialIcons-Regular.woff2) format('woff2');
}
.material-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;
}

url()改成字体图标文件路径，字体图标文件在
https://github.com/google/material-design-icons/tree/master/iconfont
还有有适配更好的css
在html中引入

<link href="src/icon/icon.css" rel="stylesheet">

使用

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

将android改成图标名字
图标名字和图片在
https://design.google.com/icons/
有的没有
在angular-material中的写法

<md-button>
   <md-icon class="material-icons">menu</md-icon>
</md-button>

位置

https://material.angularjs.org/latest/layout/alignment

API

https://material.angularjs.org/latest/api/directive/mdButton

demo

https://material.angularjs.org/latest/demo/button