# rollup-plugin-material-symbols

> > It's a saying that material icon/symbol font is slow, this resolves that.

Latest version **2.1.7** (published 2026-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-material-symbols
pnpm add rollup-plugin-material-symbols
yarn add rollup-plugin-material-symbols
bun add rollup-plugin-material-symbols
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.7 |
| Published | 2026-04-06 |
| First published | 2023-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | vandeurenglenn |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-material-symbols
- npm.io page: https://npm.io/package/rollup-plugin-material-symbols

## Dependencies (1)

- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.3.0

## Recent versions

- 2.1.7 (latest) — 2026-04-06
- 2.1.6 — 2024-12-15
- 2.1.5 — 2024-01-07
- 2.1.4 — 2023-09-08
- 2.1.3 — 2023-08-13
- 2.1.2 — 2023-08-13
- 2.1.1 — 2023-07-30
- 2.1.0 — 2023-07-30
- 2.0.10 — 2023-07-30
- 2.0.9 — 2023-07-29
- 2.0.8 — 2023-07-29
- 2.0.7 — 2023-07-29
- 2.0.6 — 2023-07-29
- 2.0.5 — 2023-07-29
- 2.0.4 — 2023-07-29
- … 8 more at https://npm.io/package/rollup-plugin-material-symbols/versions

## README

# rollup-plugin-material-symbols

> It's a saying that material icon/symbol font is slow, this resolves that.

## why?

### font

![lighthouse result](./assets/result-font.png)
![lighthouse slow font](./assets/font-slow.png)

### svg (inline...)

![lighthouse result](./assets/result-svg.png)

## install

```sh
npm i -D rollup-plugin-material-symbols
```

## example

### svg

[src](./test/src/svg)

[result](./test/exports/svg)

[config](./test/rollup.config.js)

#### index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span style="display: none;">
      <template name="home">@symbol-home</template>
      <template name="more_vert">@symbol-more_vert</template>
    </span>

    <test-icon>home</test-icon>
    <test-icon>more_vert</test-icon>
    <script src="./icon.js" type="module"></script>
  </body>
</html>
```

#### icon.js

```js
class Icon extends HTMLElement {
  get iconTemplateContent() {
    return document.querySelector(
      `template[name="${this.innerHTML || this.getAttribute('icon')}"]`
    ).content
  }

  get iconTemplateTextContent() {
    return this.iconTemplateContent.cloneNode(true).children[0].outerHTML
  }

  constructor() {
    super()
    this.attachShadow({mode: 'open'})
  }

  connectedCallback() {
    super.connectedCallback && super.connectedCallback()
    this.shadowRoot.innerHTML = this.render()
  }

  render() {
    const html = (...strings) => {
      return strings.reduce(
        (set, value) => (set += value.join ? value.join('') : value),
        ''
      )
    }
    return html`
      <style>
        :host {
          --custom-icon-size: 24px;
          display: block;
          height: var(--custom-icon-size);
          width: var(--custom-icon-size);
        }
      </style>

      ${this.iconTemplateTextContent}
    `
  }
}

customElements.define('test-icon', Icon)

export {Icon}
```

#### rollup config

```js
import {materialSymbolsSvg} from 'rollup-plugin-material-symbols'
export default {
  input: ['src/svg/icon.js'],
  output: [
    {
      dir: 'exports/svg',
      format: 'es'
    }
  ],
  plugins: [
    materialSymbolsSvg({
      include: ['**/*.{js,ts,html}'],
      placeholderPrefix: 'symbol', // supports @symbol-home
      elements: ['md-icon', 'custom-icon'],
      styling: {
        fill: 1
      }
    })
  ]
}
```

---
_Source: https://npm.io/package/rollup-plugin-material-symbols · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._