@mdi/js is a package that provides Material Design Icons as JavaScript constants. It allows developers to easily integrate Material Design Icons into their web applications by using SVG paths.
Importing Icons
You can import individual icons from the @mdi/js package. This allows you to use specific icons in your application without importing the entire library.
const { mdiAccount } = require('@mdi/js');Using Icons in SVG
You can use the imported icon paths in your SVG elements. This allows you to render the icons directly in your HTML.
<svg viewBox="0 0 24 24"><path d="M12,2A10,10 0 1,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 1,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 1,0 18,12A6,6 0 0,0 12,6Z" /></svg>Dynamic Icon Rendering
You can dynamically render icons by using the icon paths in your JavaScript code. This is useful for applications that need to render different icons based on user interactions or data.
const iconPath = require('@mdi/js').mdiAccount;
const svgElement = `<svg viewBox="0 0 24 24"><path d="${iconPath}" /></svg>`;react-icons provides a set of popular icons as React components. It supports multiple icon libraries, including Material Design Icons, FontAwesome, and more. Unlike @mdi/js, which provides raw SVG paths, react-icons offers ready-to-use React components.
material-design-icons is the official icon set from Google for Material Design. It provides icons in various formats, including SVG, PNG, and web fonts. While @mdi/js focuses on providing SVG paths as JavaScript constants, material-design-icons offers a broader range of formats.
mdi-react is a package that provides Material Design Icons as React components. It is similar to @mdi/js in that it focuses on Material Design Icons, but it offers the icons as React components instead of raw SVG paths.
Note: Please use the main MaterialDesign repo to report issues. This repo is for distribution of the JavaScript files only.
JavaScript and TypeScript distribution for the Material Design Icons. This module contains all the path data for all icons.
npm install @mdi/js
import { mdiAccount } from '@mdi/js'
console.log(mdiAccount); // "M...Z"
FAQs
Dist for Material Design Icons for JS/TypeScript
The npm package @mdi/js receives a total of 0 weekly downloads. As such, @mdi/js popularity was classified as not popular.
We found that @mdi/js demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.