Icons

Guidance and suggestions for using icon libraries with Arizona Bootstrap.

Heads Up!

If you're using Arizona Bootstrap, Arizona Icons and/or Material Design Sharp icons will still need to be added to your project if you would like to use them.

These icons have been approved to use within Arizona web assets like Arizona Quickstart, and Arizona Bootstrap.

Arizona Icons (Arizona branded icons)
Google Material Icons (Sharp)

Arizona Icons Implementation

Include a reference to the Arizona Icons’ CDN to your project in order to use the font icons:

<link href="https://cdn.digital.arizona.edu/lib/az-icons/main/az-icons-styles.css" rel="stylesheet">

(Latest vs. Pinned releases coming soon)

In general, developers should use the main branch version of the icons for development work, and then switch to a pinned version when development is done:

Latest is good for when you need to use icons that have been newly released, and you are following the az-icons project and know what has changed and how those changes will affect your site.
Pinned versions are good for any project that wants to be sure to not update az-icons if you don’t purposefully change it.

Refer to Arizona Icons GitHub repository for more information and resources.

.az-icon-arizona

.az-icon-award

.az-icon-cost

.az-icon-facebook

.az-icon-financial-aid

.az-icon-grad-cap

.az-icon-instagram

.az-icon-linkedin

.az-icon-majors-and-degrees

.az-icon-map-marker

.az-icon-pinterest

.az-icon-scholarship

.az-icon-sign-post

.az-icon-spotify

.az-icon-spring-fling

.az-icon-tiktok

.az-icon-twitter

.az-icon-x-twitter

.az-icon-wildcat

.az-icon-youtube

Material Icons Implementation

Include the Material Icons’ stylesheet in your project in order to use the font icons. Refer to Material Icons docs for more information.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

Google’s Material Icons can be implemented just like text, in that they can combined with any utility class available to text.

Your span should include the .material-icons-sharp class along with any utility classes you want to include. The text inside the span should be the ID/name of the icon you want to use. Browse the font icon library (sharp style) to find the ID of your desired icon.

accessible_forward accessible_forward accessible_forward

<span class="material-icons-sharp text-sky display-4">accessible_forward</span>
<span class="material-icons-sharp text-azurite display-3">accessible_forward</span>
<span class="material-icons-sharp text-blue display-1">accessible_forward</span>