@vcl/vcl/button/demo/example-icon.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<button type="button" class="button square" title="Square">
  <div class="icogram" >
    <div class="icon fas fa-chevron-right" aria-hidden="true" aria-label="Label for icon only button" role="img"></div>
  </div>
</button>

<button type="button" class="button" style="width: 6em;" title="Defined width">
  <div class="icogram" >
    <div class="icon fas fa-chevron-right" aria-hidden="true" aria-label="Label for icon only button" role="img"></div>
  </div>
</button>

<button type="button" class="button" title="Prepended icon">
  <div class="icogram">
    <div class="icon fas fa-chevron-right" aria-hidden="true" role="img"></div>
    <span class="text">Next</span>
  </div>
</button>

<button type="button" class="button" title="Appended icon">
  <div class="icogram">
    <span class="text">Next</span>
    <div class="icon fas fa-chevron-right" aria-hidden="true" role="img"></div>
  </div>
</button>

<button type="button" class="button" title="Animated icon">
  <div class="icogram">
    <div style="font-size: 1.5em;" class="icon fas fa-circle-notch fa-spin fa-3x fa-fw" aria-hidden="true" role="img"></div>
    <span class="text">Animated icon font based</span>
  </div>
</button>

<button type="button" class="button" title="Animated icon">
  <div class="icogram">
    <div class="icon" aria-label="loading…" role="img">
      <img style="width: 2.4em;" src="https://cdn.jsdelivr.net/gh/vcl/vcl/modules/busy-indicator/imgs/vclBusyIndicatorStraight.svg" role="presentation">
    </div>
    <span class="text">Animated icon SVG based</span>
  </div>
</button>

<button type="button" class="button square" title="Inline SVG">
  <div class="icogram">
    <div class="icon icon-size1" aria-label="clock" role="img">
      <svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: block;"><g><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path></g></svg>
    </div>
  </div>
</button>

<button type="button" class="button half-transparent square" title="SVG image">
  <div class="icogram">
    <div class="icon icon-size1" aria-label="cog" role="img">
      <div class="layout-fit" style="background-image: url('http://materialdesignicons.com/api/download/icon/png/E4A14909-3821-4DB1-A739-4DA464ABEEB7/36'); background-size: 100%; background-position: 50% 50%;">
    </div>
  </div>
</button>