How to use @material/mwc-ripple - 10 common examples

let iconTemplate: TemplateResult|string = '';

    if (this.icon) {
      iconTemplate = html`
        <span class="material-icons mdc-fab__icon">${this.icon}</span>`;
    }

    const label = showLabel ? html
    `<span class="mdc-fab__label">${this.label}</span>`: '';
    return html`
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        <div class="mdc-fab__ripple"></div>
        ${this.showIconAtEnd ? label : ''}
        ${iconTemplate}
        ${!this.showIconAtEnd ? label : ''}
      </button>`;
  }
}

protected render() {
    return html`
      <div class="mdc-radio">
        <input name="${this.name}" type="radio" class="mdc-radio__native-control">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
        <div class="mdc-radio__ripple"></div>
      </div>`;
  }

protected render() {
    return html`<button aria-label="${this.label || this.icon}" class="mdc-icon-button">
    
      <i class="material-icons">${this.icon}</i>
    
  </button>`;
  }
}

protected render() {
    const classes = {
      'mdc-button--raised': this.raised,
      'mdc-button--unelevated': this.unelevated,
      'mdc-button--outlined': this.outlined,
      'mdc-button--dense': this.dense,
    };
    const mdcButtonIcon =
        html`<span class="material-icons mdc-button__icon">${this.icon}</span>`;
    const buttonRipple = ripple({unbounded: false});
    return html`
      <button aria-label="${this.label || this.icon}" class="mdc-button ${classMap(classes)}" id="button">
        <div class="mdc-button__ripple"></div>
        ${this.icon &amp;&amp; !this.trailingIcon ? mdcButtonIcon : ''}
        <span class="mdc-button__label">${this.label}</span>
        ${this.icon &amp;&amp; this.trailingIcon ? mdcButtonIcon : ''}
        
      </button>`;
  }
}

render() {
        return html `
      ${this.renderStyle()}
      <div class="mdc-radio">
        <input name="${this.name}" type="radio" class="mdc-radio__native-control">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>`;
    }
    firstUpdated() {

render() {
        const classes = {
            'mdc-button--raised': this.raised,
            'mdc-button--unelevated': this.unelevated,
            'mdc-button--outlined': this.outlined,
            'mdc-button--dense': this.dense,
        };
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-button ${classMap(classes)}">
        ${this.icon ? html `<span class="material-icons mdc-button__icon">${this.icon}</span>` : ''}
        ${this.label}
        
      </button>`;
    }
};

protected render() {
    return html`
      <div class="mdc-checkbox">
        <input class="mdc-checkbox__native-control" type="checkbox">
        <div class="mdc-checkbox__background">
          <svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
            <path d="M1.73,12.91 8.1,19.28 22.79,4.59" fill="none" class="mdc-checkbox__checkmark-path"></path>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      </div>`;

render() {
        const classes = {
            'mdc-fab--mini': this.mini,
            'mdc-fab--exited': this.exited,
            'mdc-fab--extended': this.extended,
        };
        const showLabel = this.label !== '' && this.extended;
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        ${showLabel &amp;&amp; this.showIconAtEnd ? this.label : ''}
        ${this.icon ? html `<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
        ${showLabel &amp;&amp; !this.showIconAtEnd ? this.label : ''}
      </button>`;
    }
};

render() {
        const classes = {
            'mdc-fab--mini': this.mini,
            'mdc-fab--exited': this.exited,
            'mdc-fab--extended': this.extended,
        };
        const showLabel = this.label !== '' && this.extended;
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        ${showLabel &amp;&amp; this.showIconAtEnd ? this.label : ''}
        ${this.icon ? html `<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
        ${showLabel &amp;&amp; !this.showIconAtEnd ? this.label : ''}
      </button>`;
    }
};

render() {
        return html `
      ${this.renderStyle()}
      <div class="mdc-switch">
        <div class="mdc-switch__track"></div>
        <div class="mdc-switch__thumb-underlay">
          <div class="mdc-switch__thumb">
            <input role="switch" class="mdc-switch__native-control" id="basic-switch" type="checkbox">
          </div>
        </div>
      </div>
      `;
    }
};