Icons

The Icon component is a simple way to add standard Icons to your website. They should be used to give extra context and not alone to convey meaning.

We make use of the Material Design Icons library for most of our icons. In the future we will add more icons tailored to higher education use.

Usage

Import icons.twig and the macro, set your options and call the macro to output:

{% from '@miz/components/icons/icons.twig' import Icon as icon %}

{% set iconOptions = {
  "class": "miz-icon--md",
  "name": "search"
} %}

{{ icon( iconOptions ) }}

The above code will output:

<!-- Icon output -->
<i class="miz-icon material-icons miz-icon--md">search</i>

To add a color, simply use a text color utility to colorize it.

{% set iconOptions = {
  "class": "miz-icon--md miz-text--red",
  "name": "search"
} %}

See the View tab for each button variation to see an example of how it is being used.

Accessibility

Icons should never be used alone to convey meaning or information. They should be considered extra context for sighted users only. Our setup provides some textual information in the output but it is very possible this is not enough context and should not be considered a means to accessibility alone.

Macro reference

Icon( options )

Currently the only Icon component to use.

Param Default Values Description
class miz-icon String Additional classes appended to the icon
attributes null Object Attributes to be applied to the icon
name null String The name of the icon to be used. See Material Design Icons documentation for all available icons.

SVG Icons

A limited number of icons specifically used for Social Media are imported as SVGs. They can be found in miz/images/icons/miz-social-network.

SVG Usage

Icons can be called with the macro and options:

{% from '@miz/components/icons/icons.twig' import IconSVG as iconsvg %}

{% set iconsvgOptions = {
  "class":    "miz-icon--md miz-svg--facebook",
  "name":     "facebook"
} %}

{{ iconsvg( iconsvgOptions ) }}

That code will output:

<!-- Icon output -->
<svg class="miz-icon miz-icon__svg miz-icon--md miz-svg--facebook" aria-hidden="true">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
</svg>

Icon SVG Options

Note that name is required for the SVG icon to populate. A selection of color utility classes are available for SVG fills using .miz-svg--ColorName.

Param Default Values Description
class miz-icon
miz-icon__svg
String Additional classes appended to the icon
attributes null Object Attributes to be applied to the icon
name null String The name of the icon to be used.
Options are facebook, twitter, linkedin, youtube,
instagram, google, and snapchat
{# Import Icon component #}
{% from '@miz/components/icons/icons.twig' import Icon as icon %}

{# Mizzou gold #}
{% set iconOptions = {
  "class":      "miz-icon--lg miz-text--gold",
  "name": "search"
} %}

{{ icon( iconOptions ) }}

{# Red #}
{%- set iconOptions = {
  "class":      "miz-icon--lg miz-text--red",
  "name": "search"
} -%}

{{ icon( iconOptions ) }}

{# Blue #}
{%- set iconOptions = {
  "class":      "miz-icon--lg miz-text--blue",
  "name": "search"
} -%}

{{ icon( iconOptions ) }}

{# Green #}
{%- set iconOptions = {
  "class":      "miz-icon--lg miz-text--green",
  "name": "search"
} -%}

{{ icon( iconOptions ) }}

{# White #}
{%- set iconOptions = {
  "class":      "miz-icon--lg miz-fill--black miz-text--white",
  "name": "search"
} -%}

{{ icon( iconOptions ) }}
<i class="miz-icon material-icons miz-icon--lg miz-text--gold">search</i>


<i class="miz-icon material-icons miz-icon--lg miz-text--red">search</i>

<i class="miz-icon material-icons miz-icon--lg miz-text--blue">search</i>

<i class="miz-icon material-icons miz-icon--lg miz-text--green">search</i>

<i class="miz-icon material-icons miz-icon--lg miz-fill--black miz-text--white">search</i>
/* No context defined for this component. */
  • Content:
    /* ========================================================================
        Icons
     ======================================================================= */
    
    //  Import Google Material Design Icon font
    @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
    
    // Base style for icons
    .miz-icon {
      vertical-align: middle;
      display: inline-block;
    }
    
    // Small icons
    .miz-icon--sm {
      font-size: $miz-icon__font-size--sm;
    }
    
    .miz-icon__svg.miz-icon--sm {
      width: 18px;
      height: 18px;
    }
    
    // Medium (Default) icons
    .miz-icon--md {
      font-size: $miz-icon__font-size;
    }
    
    .miz-icon__svg.miz-icon--md {
      width: 24px;
      height: 24px;
    }
    
    // Large icons
    .miz-icon--lg {
      font-size: $miz-icon__font-size--lg;
    }
    
    .miz-icon__svg.miz-icon--lg {
      width: 36px;
      height: 36px;
    }
    
    // Extra large icons
    .miz-icon--xl {
      font-size: $miz-icon__font-size--xl;
    }
    
    .miz-icon__svg.miz-icon--xl {
      width: 48px;
      height: 48px;
    }
    
    // Icons used in buttons to adjust position
    .miz-icon--button {
      position: relative;
      top: -0.0625em;
    }
    
    // Used to "un"adjust the icon.
    .miz-icon--button-no-adjust {
      top: initial;
      right: initial;
    }
    
    /* SVG Colors
    ======================================================================== */
    
    .miz-svg--white { fill: $miz-white !important; }
    .miz-svg--black { fill: $miz-black !important; }
    .miz-svg--black-200 { fill: $miz-black-200 !important; }
    .miz-svg--black-300 { fill: $miz-black-300 !important; }
    
    .miz-svg--gold { fill: $miz-gold !important; }
    .miz-svg--gold-200 { fill: $miz-gold-200 !important; }
    .miz-svg--gold-300 { fill: $miz-gold-300 !important; }
    
    .miz-svg--red { fill: $miz-red !important; }
    .miz-svg--orange { fill: $miz-orange !important; }
    .miz-svg--blue { fill: $miz-blue !important; }
    .miz-svg--green { fill: $miz-green !important; }
    
    // Social fills for SVG
    .miz-svg--facebook { fill: $miz-color-facebook; }
    .miz-svg--twitter { fill: $miz-color-twitter; }
    .miz-svg--linkedin { fill: $miz-color-linkedin; }
    .miz-svg--youtube { fill: $miz-color-youtube; }
    .miz-svg--instagram { fill: $miz-color-instagram; }
    .miz-svg--google { fill: $miz-color-google; }
    .miz-svg--snapchat { fill: $miz-color-snapchat; }
    
    a > .miz-icon__svg {
      &:hover,
      &:focus,
      &:active {
        opacity: 0.75;
      }
    }
    
  • URL: /components/raw/miz-icons/_icons.scss
  • Filesystem Path: fractal/pattern-library/miz/components/icons/_icons.scss
  • Size: 2.2 KB