We are using Material Design icon library for icons.
Read the official Material Design Icon's Documentation for a full list of instructions and other options.
Material Design Icon is a simple yet beautifully created icons for designers and developers to use in your next project.
We have already included material design icons in template so you don't have to worry about including any files. Check below mentioned path to find the location in your template.
<link rel="stylesheet" href="assets/vendor/fonts/materialdesignicons.css" />Basic Usage
| Class | Value |
|---|---|
class="mdi mdi-{value}"
|
ICON_NAME |
Sizing
<i class="mdi mdi-arrow-up-bold-outline mdi-48px"></i>
<i class="mdi mdi-arrow-up-bold-outline mdi-36px"></i>
<i class="mdi mdi-arrow-up-bold-outline mdi-24px"></i>
<i class="mdi mdi-arrow-up-bold-outline mdi-20px"></i>
<i class="mdi mdi-arrow-up-bold-outline mdi-18px"></i>
<i class="mdi mdi-arrow-up-bold-outline mdi-14px"></i>| Class | Value |
|---|---|
class="mdi-{value}"
|
14px |18px |20px | 24px | 36px | 48px |
Rotation & Flipping
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-45"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-90"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-135"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-180"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-225"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-270"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-rotate-315"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-flip-v"></i>
<i class="mdi mdi-thumb-up mdi-36px mdi-flip-h"></i>| Class | Value |
|---|---|
class="mdi-{value}"
|
rotate-45 | rotate-90 | rotate-135 | rotate-180 | rotate-225 | rotate-270 | rotate-315 | flip-v | flip-h |
Border
<i class="mdi mdi-trophy-variant-outline border border-2 p-2 rounded mdi-36px"></i>
<i class="mdi mdi-trophy-variant-outline border border-2 p-2 rounded-circle mdi-36px"></i>| Class | Description |
|---|---|
class="border border-2"
|
Use utility classes of borders and padding. Use rounded class for rounded border and use rounded-circle for circle.
|