{{- /*
  Usage: `moodleicons`
*/ -}}

<div class="d-sm-flex flex-wrap">
  {{ range $.Site.Data.fontawesomeicons }}
  <div class="card mb-2 mx-1 p-1 d-flex flex-column justify-content-around text-center" style="flex: 0 0 20%; height: 150px">
    <div class="small text-truncate" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ .name }}">{{ .name }}</div>
    <div class="row g-0">
      <div class="col-sm-6 d-flex align-items-center justify-content-center">
        <i class="{{ .icon }} fa-2x"></i>
      </div>
      <div class="col-sm-6 d-flex align-items-center justify-content-center">
        {{ .standardicon | safeHTML }}
      </div>
    </div>
      <div class="small text-truncate mb-1" title="{{ .icon }}">{{ .icon }}</div>
  </div>
  {{ end }}
</div>
