Webfont Alternatives
This guide will outline some alternatives of the Webfont and why other solutions might be more ideal.
The webfont is several font files that your browser can pick from. All modern browsers will pick the woff2 font file to download. This font as of v7.1.96 is 392 KB and the CSS is 53.1 KB compressed and growing with each release.
- Large Size (larger than any modern web framework)
- Use only 10 Icons and it includes all.
In a scenerio where the frontend does not know all required icons, it may be ideal to use the webfont.
Instead of using the webfont, you can use the Iconify SVG framework. It is as easy to use as the webfont, but it only loads icons that are used on page and renders them as pixel perfect SVG rather than text. Read Iconify Guide guide on how to use MDI and MDI Light with Iconify.
For those using the React framework, there is a first party provided component @mdi/react.
The @mdi/js library contains all the icon path data. Due to tree-shaking, you ensure you're only including the icons that are needed.
import { mdiAccount } from '@mdi/js'; // mdiAccount = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z' document.querySelector('svg path').setAttribute('d', mdiAccount);
<svg viewBox="0 0 24 24"> <path d="" /> </svg>