@svgd/icons-material
v7.2.3
Published
A single-file collection of Material UI icon paths with IDE preview in the autocomplete.
Maintainers
svgdReadme
@svgd/icons-material
A single-file collection of Material UI icon paths with IDE preview in the autocomplete.
The accompanying TypeScript declarations include base64‑encoded previews so supported editors show the icon image right inside tooltips.
Installation
npm install @svgd/icons-material
# or
yarn add @svgd/icons-materialUsage with React
Create Svg Component:
import React from 'react';
import { getPaths } from '@svgd/core';
import MUISvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
export function SvgIcon({ icon, ...props }: { icon: string } & SvgIconProps) {
return (
<MUISvgIcon {...props}>
{getPaths(icon).map((attrs, i) => (
<path key={i} {...attrs} />
))}
</MUISvgIcon>
);
}Then:
import { Abc } from '@svgd/icons-material';
<SvgIcon icon={Abc} />;
or
import * as icons from '@svgd/icons-material';
<SvgIcon icon={icons.Abc} />
Usage with Vue 3
<template>
<SvgIcon :icon="icons.Abc" width="24" height="24" />
</template>
<script setup lang="ts">
import { h, defineComponent } from 'vue';
import { getPaths } from '@svgd/core';
import * as icons from '@svgd/icons-material';
const SvgIcon = defineComponent({
props: {
icon: { type: String, required: true },
width: { type: [String, Number], default: 24 },
height: { type: [String, Number], default: 24 },
},
setup(props) {
return () =>
h(
'svg',
{
xmlns: 'http://www.w3.org/2000/svg',
viewBox: '0 0 24 24',
width: props.width,
height: props.height,
},
getPaths(props.icon).map((attrs, i) => h('path', { key: i, ...attrs }))
);
},
});
</script>
Usage with Angular
// svg-icon.component.ts
import { Component, Input } from '@angular/core';
import { getPaths } from '@svgd/core';
@Component({
selector: 'svg-icon',
template: `
<svg viewBox="0 0 24 24" [attr.width]="size" [attr.height]="size">
<path
*ngFor="let attrs of paths"
[attr.d]="attrs.d"
[attr.fill]="attrs.fill"
[attr.stroke]="attrs.stroke"
/>
</svg>
`,
})
export class SvgIconComponent {
@Input() icon!: string;
@Input() size: number | string = 24;
get paths() {
return getPaths(this.icon);
}
}
Then in your module:
import { NgModule } from '@angular/core';
import { SvgIconComponent } from './svg-icon.component';
@NgModule({
declarations: [SvgIconComponent],
exports: [SvgIconComponent],
})
export class SvgIconModule {}
Usage in Plain JavaScript (no framework)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SVGD Plain JS Example</title>
<script type="module">
import { getPaths } from '@svgd/core';
import { Abc } from '@svgd/icons-material';
document.addEventListener('DOMContentLoaded', () => {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('width', '64');
svg.setAttribute('height', '64');
getPaths(Abc).forEach((attrs) => {
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
Object.entries(attrs).forEach(([key, value]) => {
path.setAttribute(key, value);
});
svg.appendChild(path);
});
document.body.appendChild(svg);
});
</script>
</head>
<body>
</body>
</html>More info
This package exports paths.js with 10,773 icon path definitions.
All icons are bundled into one file to avoid the thousands of small modules in the original MUI icons packages.
-> 
A static HTML preview is available on GitHub Pages.