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
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 launchVariations
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's library of beautifully crafted symbols and icons