osmd-extended/src/Playback/UIComponents/ControlPanel/ControlPanel.html

<div class="control-panel annotation-ui-container hide">
  <div class="control-panel__container">
    <div class="mdc-card controls-container">
      <div class="title-bar toolbar playback-title-bar">
        <span class="col-10 d-inline-block v-align-middle">
            <h4 class="playback-title">Tempo (BPM)</h4>
        </span>
        <span class="col-2 d-inline-block v-align-middle">
            <div class="mdc-touch-target-wrapper">
                <button
                        aria-label="Close Audio Controls"
                        class="mdc-icon-button material-icons close-playback">close</button>
                </div>
        </span>
      </div>
      <div class="col-10 metronome-toolbar">
        <div class="mdc-slider mdc-slider--discrete metronome-slider" tabindex="0" role="slider" data-step="1"
              aria-valuemin="1" aria-valuemax="300" aria-valuenow="90"
              aria-label="BPM">
            <div class="mdc-slider__track-container">
            <div class="mdc-slider__track"></div>
            </div>
            <div class="mdc-slider__thumb-container">
            <div class="mdc-slider__pin">
              <span class="mdc-slider__pin-value-marker">60</span>
            </div>
            <svg class="mdc-slider__thumb" width="21" height="21">
              <circle cx="10.5" cy="10.5" r="7.875"></circle>
            </svg>
            <div class="mdc-slider__focus-ring"></div>
            </div>
        </div>
      </div>
      <div class="col-10 hide volume-toolbar">
      </div>
      <div class="mdc-tab-bar playback-tabs" role="tablist">
        <div class="mdc-tab-scroller">
            <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">
                <button class="mdc-tab" role="tab" aria-selected="true" aria-label="Metronome" tabindex="0">
                    <span class="mdc-tab__content">
                          <!--From Iconify Font. 
                          Found here: https://iconify.design/icon-sets/mdi/metronome-tick.html
                         This image specifically has the Open Font license: https://raw.githubusercontent.com/Templarian/MaterialDesign/master/LICENSE -->
                      <span style="margin-top:5px;" class="material-icons"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M12 1.75l-3.43.92l-4.5 16.83c-.01 0-.07.34-.07.5c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2c0-.16-.06-.5-.07-.5l-4.5-16.83L12 1.75M10.29 4h3.42l3.49 13H13v-5h-2v5H6.8l3.49-13M11 5v4h-1v2h4V9h-1V5h-2z" fill="#626262"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg></span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab add-symbol-mode" role="tab" aria-selected="false" aria-label="Add Symbol" tabindex="1">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">volume_up</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
            </div>
            </div>
        </div>
        </div>
    </div>
  </div>
</div>