# Icons

Since Bootstrap does not include icons by default, Material Admin Pro predominantly uses the Material icons library, created by Google, to add beautifully crafted symbols for common actions and items.

## Material Icons

Material Icons by Google

By using the icon font, there are over 900 Material icons available to choose from in five different styles. All five styles have been activated by default, but we recommend that you deactivate the icon font styles that are not being used when moving an app into production.

Below are some examples of the different icon fonts being used. For a full list of available icons, visit the Material icons reference page.

Launch Material Icons launch

## Variations

Each Material icon style has it's own unique class, which should be used with the `<i>` or `<span>` element.

Material icons use a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. Visit Material icons for a list of all available icons.

Style | Class | Example | Rendering
--- | --- | --- | ---
Filled | `.material-icons` | `<i class="material-icons">face</i>` | face
Outlined | `.material-icons-outlined` | `<i class="material-icons-outlined">face</i>` | face
Rounded | `.material-icons-round` | `<i class="material-icons-round">face</i>` | face
Two-Tone | `.material-icons-two-tone` | `<i class="material-icons-two-tone">face</i>` | face
Sharp | `.material-icons-sharp` | `<i class="material-icons-sharp">face</i>` | face

## Sizing

Four sizing variations are available in addition to the default. These classes named using the format `.icon-{size}` where size is any size between xs and xxl.

Example | Size | Rendering
--- | --- | ---
`<i class="material-icons icon-xs">face</i>` | 12px | face
`<i class="material-icons icon-sm">face</i>` | 18px | face
`<i class="material-icons">face</i>` | 24px | face
`<i class="material-icons icon-lg">face</i>` | 36px | face
`<i class="material-icons icon-xl">face</i>` | 48px | face
`<i class="material-icons icon-xxl">face</i>` | 60px | face

Since Material icons are utilized as an icon font, the `font-size` CSS property can be used to create additional custom sizes.

## Color

Use the text utilities included with Material Admin Pro to style the color of icons.

Example | Rendering
--- | ---
`<i class="material-icons text-primary">face</i>` | face
`<i class="material-icons text-secondary">face</i>` | face
`<i class="material-icons text-success">face</i>` | face
`<i class="material-icons text-danger">face</i>` | face
`<i class="material-icons text-info">face</i>` | face
`<i class="material-icons text-muted">face</i>` | face
`<i class="material-icons text-warning">face</i>` | face
`<i class="material-icons text-light">face</i>` | face
`<i class="material-icons text-white">face</i>` | face

## Extending

Visit the Material Icons Guide for more information on how to work with and extend the Material Icons.

Alternative icon fonts are available to use with Material Admin Pro as well. The icons documentation for this product contains more information on how to integrate other icon libraries into this project.

### Related Links

Material Icons

Material's library of beautifully crafted symbols and icons

Related Link arrow_upward