JavaScript/MDC-Sandbox/dist/index.html

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Material Web Components Sandbox</title><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link href="main.css" rel="stylesheet"></head><body><header><h1>Material Components Sandbox</h1></header><section><h2>Buttons</h2><article><button class="mdc-button mdc-button--touch"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Text Button</span><div class="mdc-button__touch"></div></button> <button class="mdc-button mdc-button--touch"><div class="mdc-button__ripple"></div><i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i> <span class="mdc-button__label">Text Button plus icon</span></button> <button class="mdc-button mdc-button--touch" disabled="disabled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Disabled Text Button</span><div class="mdc-button__touch"></div></button> <button class="mdc-button mdc-button--touch mdc-button--outlined"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Outlined Button</span></button> <button class="mdc-button mdc-button--touch mdc-button--outlined"><div class="mdc-button__ripple"></div><i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i> <span class="mdc-button__label">Outlined Button plus Icon</span></button> <button class="mdc-button mdc-button--touch mdc-button--outlined" disabled="disabled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">DisabledOutlined Button</span></button> <button class="mdc-button mdc-button--touch mdc-button--unelevated"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Unelevated Button</span></button> <button class="mdc-button mdc-button--touch mdc-button--unelevated"><div class="mdc-button__ripple"></div><i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i> <span class="mdc-button__label">Unelevated Button plus Icon</span></button> <button class="mdc-button mdc-button--touch mdc-button--unelevated" disabled="disabled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Disabled Unelevated Button</span></button> <button class="mdc-button mdc-button--touch mdc-button--raised"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Contained Button</span></button> <button class="mdc-button mdc-button--touch mdc-button--raised"><div class="mdc-button__ripple"></div><i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i> <span class="mdc-button__label">Contained Button plus Icon</span></button> <button class="mdc-button mdc-button--touch mdc-button--raised" disabled="disabled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Disabled Contained Button</span></button></article></section><script src="app.js"></script></body></html>