Skip to content

Serving from fonts.googleapis.com

Valentin Degenne edited this page Jan 17, 2024 · 6 revisions

The main idea is to convert the link in our final html to include only the icons we need. Here's an example using @web/rollup-plugin-html but you can use any tools you like for html transformation:

import {mdIcon, minifySymbolsLink} from 'rollup-plugin-md-icon';
import {rollupPluginHTML as html} from '@web/rollup-plugin-html';

const DEV = process.env.NODE_ENV == 'DEV';

export default {
  plugins: [
    DEV
      ? html() // no plugin, no transformation during dev
      : [mdIcon(), html({ transformHtml: minifySymbolsLink })]
  ]
}

You can use NODE_ENV=DEV rollup -cw for development and rollup -c for building.
The environment variable allows us to use a all-in-one symbols stylesheet only during development and minify the link at build time.

Clone this wiki locally