Dist for Material Design Webfont. This includes the Stock and Community icons in a single webfont collection.
@mdi/font is a package that provides access to the Material Design Icons (MDI) in a web-friendly font format. It allows developers to easily integrate a wide range of icons into their web applications using simple CSS classes.
Basic Icon Usage
This feature allows you to include any of the Material Design Icons in your HTML by using the appropriate CSS class. The example shows how to include a 'home' icon.
<i class="mdi mdi-home"></i>Icon Size Adjustment
You can adjust the size of the icons by appending size-specific classes. The example shows how to set the 'home' icon to 24 pixels.
<i class="mdi mdi-home mdi-24px"></i>Icon Color Customization
You can customize the color of the icons using inline styles or CSS. The example shows how to set the 'home' icon color to red.
<i class="mdi mdi-home" style="color: red;"></i>Rotating Icons
You can rotate icons by using rotation-specific classes. The example shows how to rotate the 'home' icon by 90 degrees.
<i class="mdi mdi-home mdi-rotate-90"></i>Spinning Icons
You can make icons spin using the 'mdi-spin' class. The example shows how to make a 'loading' icon spin.
<i class="mdi mdi-loading mdi-spin"></i>Font Awesome is a popular icon toolkit that provides a wide range of icons in a web-friendly font format. It offers similar functionalities to @mdi/font, such as easy icon integration, size adjustment, and color customization. However, Font Awesome has its own unique set of icons and design style.
Ionicons is an open-source icon set designed for use with Ionic Framework, but it can be used in any web project. It offers a variety of icons and similar functionalities to @mdi/font, including easy integration and customization options. Ionicons has a different design aesthetic compared to Material Design Icons.
Bootstrap Icons is an icon library designed to work seamlessly with Bootstrap, but it can be used independently as well. It provides a wide range of icons and similar functionalities to @mdi/font, such as easy integration and customization. The design style of Bootstrap Icons aligns with the Bootstrap framework's aesthetics.
Note: Please use the main MaterialDesign repo to report issues. This repo is for distribution of the Webfont files only.
Webfont distribution for the Material Design Icons.
npm install @mdi/font
Package built with @mdi/font-build.
FAQs
Dist for Material Design Webfont. This includes the Stock and Community icons in a single webfont collection.
The npm package @mdi/font receives a total of 222,699 weekly downloads. As such, @mdi/font popularity was classified as popular.
We found that @mdi/font demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.