Skip to main content

Icons

Material Symbols

The Material Symbols (Sharp style) icon set can be used for web and digital applications.

How to use Material Symbols icons

  • In a CMS dropdown menu or text field
    1. Search for an appropriate icon from the Material Symbols web page.
      • If you use the Filters menu, ensure that Material Symbols and Sharp are selected in the Style section.
        Style filter settings
    2. Click on the icon; a sidebar menu will open on the right hand side.
    3. Select the Android tab (ignore the Android Studio instructions link). Copy the icon code name.
      Copy the icon code name
    4. Enter this code name in the CMS text field or dropdown menu (note that dropdown menus may contain legacy icon names; these can be ignored/replaced).
  • Embedding in inline body content (HTML knowledge required)
    1. Search for an appropriate icon from the Material Symbols web page.
      • If you use the Filters menu, ensure that Material Symbols and Sharp are selected in the Style section.
        Style filter settings
    2. Click on the icon; a sidebar menu will open on the right hand side.
    3. In the Web tab, scroll down to the code block labelled Inserting the icon. Copy the HTML code.
      Copy the HTML code
    4. In the CMS WYSIWYG editor, select the Source Code icon and paste the code into the appropriate spot. If you need assistance with this, please contact webteam@ontariotechu.ca.

Custom icons

OT Icon set

Custom icons will no longer be created except in the case of brand-related graphics. The majority of custom icons with a prefix of "icon_" have been retired or mapped to an equivalent icon in the Material Symbols icon set. The following Ontario Tech brand elements, external logos and legacy icons are the only custom icons that should be used.