University of Leeds Design System v1.0.13

Icon

Guidance

Icons currently available are:

mdiArrowExpand
mdiArrowLeft
mdiArrowRight
mdiClose
mdiChevronLeft
mdiChevronRight
mdiChevronDown
mdiChevronUp
mdiInformationVariant
mdiPageFirst
mdiPageLast
mdiPlus
mdiMinus
mdiCheck
mdiPlay

<h2>Status icons</h2>

<button class="uol-icon uol-icon--status-info">Info</button>
<button class="uol-icon uol-icon--status-success">Success</button>
<button class="uol-icon uol-icon--status-error">Error</button>
<button class="uol-icon uol-icon--status-warning">Warning</button>

<h2>Material Design specific icons</h2>

<button class="uol-icon uol-icon--mdiAlertOutline">AlertOutline</button>
<button class="uol-icon uol-icon--mdiAlertCircleOutline">AlertCircleOutline</button>
<button class="uol-icon uol-icon--mdiAlertBoxOutline">AlertBoxOutline</button>
<button class="uol-icon uol-icon--mdiArrowExpand">ArrowExpand</button>
<button class="uol-icon uol-icon--mdiArrowLeft">ArrowLeft</button>
<button class="uol-icon uol-icon--mdiArrowRight">ArrowRight</button>
<button class="uol-icon uol-icon--mdiCheck">mdiCheck</button>
<button class="uol-icon uol-icon--mdiChevronDown">mdiChevronDown</button>
<button class="uol-icon uol-icon--mdiChevronLeft">mdiChevronLeft</button>
<button class="uol-icon uol-icon--mdiChevronRight">ChevronRight</button>
<button class="uol-icon uol-icon--mdiChevronUp">ChevronUp</button>
<button class="uol-icon uol-icon--mdiClose">Close</button>
<button class="uol-icon uol-icon--mdiInformationVariant">InformationVariant</button>
<button class="uol-icon uol-icon--mdiMinus">Minus</button>
<button class="uol-icon uol-icon--mdiPageFirst">PageFirst</button>
<button class="uol-icon uol-icon--mdiPageLast">PageLast</button>
<button class="uol-icon uol-icon--mdiPlus">Plus</button>
<button class="uol-icon uol-icon--mdiPlay">Play</button>
<button class="uol-icon uol-icon--mdiPhoneOutline">Phone</button>
 
<h2>Status icons</h2>

<button class="uol-icon uol-icon--status-info">Info</button>
<button class="uol-icon uol-icon--status-success">Success</button>
<button class="uol-icon uol-icon--status-error">Error</button>
<button class="uol-icon uol-icon--status-warning">Warning</button>

<h2>Material Design specific icons</h2>

<button class="uol-icon uol-icon--mdiAlertOutline">AlertOutline</button>
<button class="uol-icon uol-icon--mdiAlertCircleOutline">AlertCircleOutline</button>
<button class="uol-icon uol-icon--mdiAlertBoxOutline">AlertBoxOutline</button>
<button class="uol-icon uol-icon--mdiArrowExpand">ArrowExpand</button>
<button class="uol-icon uol-icon--mdiArrowLeft">ArrowLeft</button>
<button class="uol-icon uol-icon--mdiArrowRight">ArrowRight</button>
<button class="uol-icon uol-icon--mdiCheck">mdiCheck</button>
<button class="uol-icon uol-icon--mdiChevronDown">mdiChevronDown</button>
<button class="uol-icon uol-icon--mdiChevronLeft">mdiChevronLeft</button>
<button class="uol-icon uol-icon--mdiChevronRight">ChevronRight</button>
<button class="uol-icon uol-icon--mdiChevronUp">ChevronUp</button>
<button class="uol-icon uol-icon--mdiClose">Close</button>
<button class="uol-icon uol-icon--mdiInformationVariant">InformationVariant</button>
<button class="uol-icon uol-icon--mdiMinus">Minus</button>
<button class="uol-icon uol-icon--mdiPageFirst">PageFirst</button>
<button class="uol-icon uol-icon--mdiPageLast">PageLast</button>
<button class="uol-icon uol-icon--mdiPlus">Plus</button>
<button class="uol-icon uol-icon--mdiPlay">Play</button>
<button class="uol-icon uol-icon--mdiPhoneOutline">Phone</button>
  • Content: 
    .js {
  .uol-icon {
    position: relative;
    display: inline-flex;

    svg {
      display: block;
      width: 1em;
      height: 1em;
      margin-top: .2em;
      margin-right: 0.4em;
      margin-left: -0.4em;

      path {
        fill: currentColor;

        @media (-ms-high-contrast: active) {
          fill: buttonText;
        }
      }
    }
  }

    .uol-icon--position-after {
      flex-direction: row-reverse;

      svg {
        margin-right: -0.4em;
        margin-left: 0.4em;
      }
    }

    .uol-icon--icon-only {

      svg {
        margin: 0;
      }

      .uol-icon__label {
        @extend .hide-accessible;
      }
    }
}
  • URL: /components/raw/uol-icon/_icon.scss
  • Filesystem Path: src/library/02-components/icon/_icon.scss
  • Size: 659 Bytes
  • Content: 
    // Import an array of icontypes from some config file
// Import each of the icons we plan to use

import {
  mdiAlert,
  mdiAlertOutline,
  mdiAlertBoxOutline,
  mdiAlertCircleOutline,
  mdiArrowExpand,
  mdiArrowLeft,
  mdiArrowRight,
  mdiCheck,
  mdiChevronDown,
  mdiChevronLeft,
  mdiChevronRight,
  mdiChevronUp,
  mdiClose,
  mdiDeleteForeverOutline,
  mdiFilterOutline,
  mdiInformationVariant,
  mdiMinus,
  mdiPageFirst,
  mdiPageLast,
  mdiPlus,
  mdiPlay,
  mdiPhoneOutline
} from '@mdi/js'

const mdiIcons = {
  mdiAlert,
  mdiAlertOutline,
  mdiAlertBoxOutline,
  mdiAlertCircleOutline,
  mdiArrowExpand,
  mdiArrowLeft,
  mdiArrowRight,
  mdiCheck,
  mdiChevronDown,
  mdiChevronLeft,
  mdiChevronRight,
  mdiChevronUp,
  mdiClose,
  mdiDeleteForeverOutline,
  mdiFilterOutline,
  mdiInformationVariant,
  mdiMinus,
  mdiPageFirst,
  mdiPageLast,
  mdiPlus,
  mdiPlay,
  mdiPhoneOutline
}

export const uolIcon = () => {

  const iconContainers = document.querySelectorAll('.uol-icon')

  iconContainers.forEach( (iconContainer) => {

    // check if the icon type is mdi or "status type" and return if not either
    if (!iconContainer.className.match(/uol-icon--mdi|uol-icon--status-/)) {
      return
    } else {

      // Get the icon that "matches" the class modifier
      let mdiIconString
      iconContainer.classList.forEach( (className) =>{
        if(className.startsWith('uol-icon--mdi')) {
          mdiIconString = className.replace('uol-icon--','')
        } else if (className.startsWith('uol-icon--status-')) {
          let statusType = className.replace('uol-icon--status-','')
          switch (statusType) {
            case 'info':
              mdiIconString = 'mdiInformationVariant'
              break;
            case 'success':
              mdiIconString = 'mdiCheck'
              break;
            case 'error':
              mdiIconString = 'mdiAlertCircleOutline'
              break;
            case 'warning':
              mdiIconString = 'mdiAlertOutline'
              break;
            default:
              mdiIconString = null
          }
        }
      })

      if (mdiIconString) {
        // Assing MDI icon to path
        const iconPath = mdiIcons[mdiIconString]

        // if matching MDI path exists
        if (iconPath) {

          // wrap the inner text
          iconContainer.innerHTML = `<span class="uol-icon__label">${iconContainer.innerHTML}</span>`

          // Create and prepend SVG
          let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
          svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
          svg.setAttribute('viewBox', '0 0 24 24')
          svg.setAttribute('focusable', 'false')
          svg.setAttribute('aria-hidden', 'true')
          svg.setAttribute('height', '1rem')
          svg.setAttribute('width', '1rem')
          svg.innerHTML = `
            <path fill="#000000" fill-rule="nonzero" d="${iconPath}"/>
          `
          iconContainer.prepend(svg)
        }
      }
    }
  })
}
  • URL: /components/raw/uol-icon/icon.module.js
  • Filesystem Path: src/library/02-components/icon/icon.module.js
  • Size: 3 KB 
/* No context defined. */