Material Icons provide a beautiful and efficient way to enhance your web applications with visual symbols. In this guide, you’ll learn how to install and use Material Icons effectively, keeping your projects lightweight and stylish.

Installation

To get started with Material Icons, you need to install the latest version. Use the following command in your terminal:

npm install material-icons@latest

Note: If you are upgrading from version 0.x to 1.x, be sure to consult the 1.0.0 release notes.

Usage

Once installed, you can import Material Icons in various ways depending on your project setup.

• Via JavaScript:

  For example, in src/index.js in Create React App or src/main.js in Vue CLI:

  import 'material-icons/iconfont/material-icons.css';

• Via CSS:

  In src/styles.css in Angular CLI, you can use:

  @import 'material-icons/iconfont/material-icons.css';

• Via HTML:

  Link it directly in your HTML file:

  <link href="path/to/material-icons/iconfont/material-icons.css" rel="stylesheet">

To display an icon, just use the following HTML syntax:

<span class="material-icons">pie_chart</span>

You can also choose from several styles:

• Filled: <span class="material-icons">pie_chart</span>
• Outlined: <span class="material-icons-outlined">pie_chart</span>
• Round: <span class="material-icons-round">pie_chart</span>
• Sharp: <span class="material-icons-sharp">pie_chart</span>
• Two Tone: <span class="material-icons-two-tone">pie_chart</span>

Reducing Build Size

The default material-icons.css contains all icon styles, which may unnecessarily bloat your build. To keep things lightweight:

• Import only what you need:

-import 'material-icons/iconfont/material-icons.css';
+import 'material-icons/iconfont/filled.css';
+import 'material-icons/iconfont/outlined.css';

• Be sure to include only the required styles.

Using Sass

If you’re using Sass, include the following in your src/styles.scss:

@import 'material-icons/iconfont/material-icons.scss';

Available Sass variables include:

• $material-icons-font-path: . !default;
• $material-icons-font-size: 24px !default;
• $material-icons-font-display: block !default;

If you’re encountering errors with webpack or Vue CLI, add this line before importing:

$material-icons-font-path: ~material-icons/iconfont;

Using Angular mat-icon

For Angular users, to display icons, use:

<mat-icon>pie_chart</mat-icon>

or specify the font set:

<mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>

Available Icons

For a comprehensive list of available icons, check out the demo.

Troubleshooting

If you run into issues while integrating Material Icons, consider the following troubleshooting steps:

• Double-check the import paths.
• Ensure that you have the latest version installed.
• Make sure to add the correct build commands relevant to your framework.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Incorporating Material Icons into your web projects is straightforward and can significantly enhance user experience through intuitive visual cues. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.