DEV Community

Shuvo
Shuvo

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

using yarn

yarn add @mdi/font
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode
  1. In your component or pages use like this
<span className="mdi mdi-cube"></span>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more