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 ? [] : mdIcon(),
    html({
      transformHtml: (html) => (DEV ? html : minifySymbolsLink(html))
    })
  ]
}

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