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--position-after uol-icon--status-info">Info</button>
<button class="uol-icon uol-icon--position-after uol-icon--status-success">Success</button>
<button class="uol-icon uol-icon--position-after uol-icon--status-error">Error</button>
<button class="uol-icon uol-icon--position-after uol-icon--status-warning">Warning</button>

<h2>Material Design icons</h2>

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

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

<h2>Material Design icons</h2>

<button class="uol-icon uol-icon--position-after uol-icon--mdiAlertOutline">AlertOutline</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiAlertCircleOutline">AlertCircleOutline</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiAlertBoxOutline">AlertBoxOutline</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiArrowExpand">ArrowExpand</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiArrowLeft">ArrowLeft</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiArrowRight">ArrowRight</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiCheck">mdiCheck</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiChevronDown">mdiChevronDown</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiChevronLeft">mdiChevronLeft</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiChevronRight">ChevronRight</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiChevronUp">ChevronUp</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiClose">Close</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiInformationVariant">InformationVariant</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiMinus">Minus</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiPageFirst">PageFirst</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiPageLast">PageLast</button>
<button class="uol-icon uol-icon--position-after uol-icon--mdiPlus">Plus</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,
      mdiWifi,
      mdiSofaSingleOutline,
      mdiParking,
      mdiDumbbell,
      mdiStore,
      mdiSoccer,
      mdiTennis,
      mdiGrill,
      mdiWashingMachine,
      mdiCoffeeOutline,
      mdiGlassMugVariant,
      mdiGrillOutline,
      mdiPaletteOutline,
      mdiMusicNote,
      mdiMicrosoftXboxController
    } 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,
      mdiWifi,
      mdiSofaSingleOutline,
      mdiParking,
      mdiDumbbell,
      mdiStore,
      mdiSoccer,
      mdiTennis,
      mdiGrill,
      mdiWashingMachine,
      mdiCoffeeOutline,
      mdiGlassMugVariant,
      mdiGrillOutline,
      mdiPaletteOutline,
      mdiMusicNote,
      mdiMicrosoftXboxController, 
    }
    
    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.6 KB
/* No context defined. */