carbon-components/html/content-switcher/content-switcher--with-icon.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div data-content-switcher class="bx--content-switcher" role="tablist" aria-label="Demo switch content">
  <button class="bx--content-switcher-btn bx--content-switcher--selected"
    data-target=".demo--panel--opt-1" role="tab"  aria-selected="true"  >
      <svg class="bx--content-switcher__icon"
      width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
    <span>First section</span>
  </button>
  <button class="bx--content-switcher-btn"
    data-target=".demo--panel--opt-2" role="tab"  >
      <svg class="bx--content-switcher__icon"
      width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
    <span>Second section</span>
  </button>
  <button class="bx--content-switcher-btn"
    data-target=".demo--panel--opt-3" role="tab"  >
      <svg class="bx--content-switcher__icon"
      width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
    <span>Third section</span>
  </button>
</div>