Material Design Icons

Material Design

Material Design Icons (MDI) is an open-source library with over 6,000 scalable icons following Google's Material Design guidelines. It provides easy integration, multiple formats, and consistent, high-quality icons to enhance your Aquiry project's UI.

Step 1: Install Material Design Icons

You can install MDI via yarn, or include it directly via CDN.

yarn add @mdi/font

Alternatively, add the following <link> tag inside the <head> of your HTML to include MDI via CDN:

<!-- Using CDN -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">

Step 2: Import CSS in Your Project

If you installed via npm, import the MDI CSS in your main SCSS or JS file:

// SCSS import
@import "custom/plugins/icons/materialdesignicons";

Step 3: Using Material Design Icons

Use the <i> tag with the appropriate class to display any icon:

<i class="mdi mdi-account"></i>
<i class="mdi mdi-alarm"></i>
<i class="mdi mdi-cart"></i>

For a complete list of icons and names, visit the Material Design Icons website.