How To Use Mdi Font With Next.js

1.Install mdi font into your project from their official web site or simply run this command in terminal

using npm

npm install @mdi/font

using yarn

yarn add @mdi/font

2.Import the css file from node_modules in your main.css or global.css file

@import url("@mdi/font/css/materialdesignicons.css");

1. In your component or pages use like this

<span className="mdi mdi-cube"></span>

There your just need to change the class name to use different icon.

That's it.You have done with setup for using mdi icon.

Thanks For Reading.