# @iconsauce/mdi-svg

> An iconsauce plugin to gather mdi SVG icons pack

Latest version **1.1.0** (published 2026-09-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install @iconsauce/mdi-svg
pnpm add @iconsauce/mdi-svg
yarn add @iconsauce/mdi-svg
bun add @iconsauce/mdi-svg
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2026-09-02 |
| First published | 2022-02-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Author | Vittorio Vittori |
| Maintainers | vitto, nicola.tamburini.maggioli |
| Keywords | plugin |

## Links

- npm: https://www.npmjs.com/package/@iconsauce/mdi-svg
- Repository: https://github.com/iconsauce/plugin-mdi-svg
- Homepage: https://github.com/iconsauce/plugin-mdi-svg#readme
- Issues: https://github.com/iconsauce/plugin-mdi-svg/issues
- npm.io page: https://npm.io/package/@iconsauce/mdi-svg

## Dependencies (1)

- [@mdi/svg](https://npm.io/package/@mdi/svg.md) ^7.4.47

## Recent versions

- 1.1.0 (latest) — 2026-09-02
- 1.0.8 — 2022-03-16
- 1.0.7 — 2022-03-15
- 1.0.6 — 2022-03-15
- 1.0.5 — 2022-02-24
- 1.0.4 — 2022-02-24
- 1.0.3 — 2022-02-24
- 1.0.2 — 2022-02-17
- 1.0.1 — 2022-02-17
- 1.0.0 — 2022-02-17

## README

# @iconsauce/mdi-svg

This plugin scrapes [Material Design Icons](https://materialdesignicons.com/) of [@mdi/svg](https://github.com/Templarian/MaterialDesign-SVG) from which contains SVG versions.

For more infos go to [iconsauce docs][iconsauce-docs].

```js
module.exports = {
  content: [
    './src/**/*.{tsx,ts}',
  ],
  fontSize: '24px',
  plugin: [
    require('@iconsauce/mdi-svg'),
  ],
}
```

You will be able to use these icons in your project.

```jsx
const MyComponent = () => {

  const icon = 'mdi/grass'

  return <section className={ icon }>
    <div className="grid desktop:grid-cols-4 mdi/emoticon-happy tablet:grid-cols-2 grid-cols-1 desktop:gap-6 gap-12 desktop:auto-rows-fr desktop:items-end">
      <i className="mdi/access-point"/>
      <span className='bg-adjust-tone-01/24 mdi/console'/>
      <div>
        <footer title="mdi/gondola"></footer>
      </div>
    </div>
  </section>
}
export default MyComponent
```

This plug-in will generate only icons used:

```css
@font-face {
  font-family: "iconsauce";
  src: url("data:font/truetype;charset=utf-8;base64,A...Z") format("truetype");
}

[class^="mdi/"], [class*=" mdi/"] {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "iconsauce" !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.mdi\/access-point::before { content: "\ea01" }
.mdi\/emoticon-happy::before { content: "\ea02" }
.mdi\/gondola::before { content: "\ea03" }
.mdi\/grass::before { content: "\ea04" }
.mdi\/harddisk::before { content: "\ea05" }
```

[iconsauce-docs]: https://iconsauce.github.io/docs/

---
_Source: https://npm.io/package/@iconsauce/mdi-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._