Web向けのマテリアルデザインフレームワークのMaterial Components for Web(MDC)をWeb Componentsとしてリパックした Material Web Components (MWC)というプロジェクトが Polymerプロジェクト から提供され始めています（ 2018/5/9、Google I/O2018でリリース ）。
最新のコンポーネントを抜粋で紹介します。
mwc-button
ボタンです。ボタンのラベルはlabel属性またはタグ内のどちらでも指定可能です。
表示例は MDCのデモ が参考になります。
<mwc-button [icon="string"] [raised/unelevated/outlined/dense] [label="string"] [disabled]></mwc-button>
※ なお、タグ中の[ ]は任意指定であることを示すもので実際のコードに記載するものではありません
mwc-icon
アイコンを単体表示するコンポーネントです（ボタンなど一部のコンポーネントはicon属性に指定すると適切にレイアウト表示できます）。
アイコンの名称はMaterial Designのアイコン一覧で確認できます。
<mwc-icon>icon_name</mwc-icon>
mwc-ripple
mwc-rippleはインク・リップル効果を提供するWebComponentです。
CSS
<mwc-ripple>というタグは、画面全体を装飾しますが、親要素にposition: relativeを指定することにより、描画範囲を限定できます。
よって、基本的には以下のような構成で用います。
<div style="position: relative">
<mwc-ripple></mwc-ripple>
</div>
イベントハンドラ
また、 mwc-ripple: Ripple is not working since “0.14.0” version. #2139 の説明のとおり、初期状態ではイベントハンドラがないため、リップル効果が作動しません。
デモコードのようにeventListenerを登録すると動作します。
プロパティ操作
mwc-rippleタグじたいにもselectedなどのプロパティを指定できます。
ReactなどのJSコンポーネントの部品として使う場合には、リファレンスを参考にプロパティを操作することで、動的に見た目を制御できます。
npm未リリースのコンポーネント
現状、開発中でnpm未リリースですが、リポジトリに存在しているコンポーネントもあります。
mwc-chip
タグなどに用いるチップです。表示例は MDCのデモ が参考になります。
<mwc-chip-set [choise] [filter]>
<mwc-chip [leadingIcon="string"] [trailingIcon="string"] [active] [label="string"]></mwc-chip>
</mwc-chip-set>
mwc-card
カードです。現状では大外のカード枠のみ表示可能です。
<mwc-card [stroke]>innerHTML</mwc-card>
mwc-dialog
モーダルダイアログです。show()とclose()というメソッドを持っています。また、openedというプロパティのtruthy/falsy値設定でも切り替わります。
<mwc-dialog [headerLabel="String"] [acceptLabel="OK"] [declineLabel="Cancel"] [scrollable]>innerHTML</mwc-dialog>
まとめ
Material Web ComponentsはPolymerが従来提供してきたPaperElementを置き換える位置付けのコンポーネント群です。
リリース済みのコンポーネントは @material/mwc-button などの名称でnpm install可能です。
CSSなどはベースのMDC(Material Components for Web)のものを活用しているため、リリース初期段階ながら見た目は整っています。
また、Web Componentsであるため、バンドルしたJavascriptを読み込めばHTMLからも利用できます。
MDCには他にも多数のコンポーネントがあり、移植には時間がかかりそうです。
コンポーネント化にあたり、 MDCが提供するadaptorインターフェース を利用しているため、自分でMWC風コンポーネントを実装することも不可能ではありません（ VueJS向けアダプター の実装が先行しており参考になります）。