Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
By Philipp Burckhardt - Oct 17, 2024
@mdi/font
Dist for Material Design Webfont. This includes the Stock and Community icons in a single webfont collection.
What is @mdi/font?
@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.
What are @mdi/font's main functionalities?
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>Other packages similar to @mdi/font
font-awesome
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
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
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 - Material Design Icons
Webfont distribution for the Material Design Icons.
npm install @mdi/font
Package built with @mdi/font-build.
Related Packages
- JavaScript/Typescript: MaterialDesign-JS
- SVG: MaterialDesign-SVG
- Font-Build MaterialDesign-Font-Build
- Desktop Font: MaterialDesign-Font
Learn More
FAQs
Dist for Material Design Webfont. This includes the Stock and Community icons in a single webfont collection.
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.
Package last updated on 27 Dec 2023
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.
Related posts
Product
Enhancing Open-Source Compliance: Introducing Socket’s Advanced License Analysis
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
By Christopher Bailey - Oct 17, 2024
Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
By John-David Dalton - Oct 16, 2024