I like to use webpack and npm. And since Material Design Icons has a nice and neat npm package, I usually just import it. However, if you want a higher score on, eg, PageSpeed or Pingdom, you'll need to get rid of the ?v=<version>
-string, as they see the version string as socalled cache busting.
Modifying the output CSS file manually isn't the right solution, as we want something automated. And we do, since we're using webpack in the first place. So we'll insert the content of the node_modules/mdi/scss/materialdesignicons
into our own _mdi.scss
-file, and exchange the parts that contains the nasty version string. This way we don't have to maintain a copy of Material Design Icons or any of their files, and it's not going to break any updates from their side.
The version string resides inside node_modules/mdi/scss/_path.scss
, which contains the @font-face
-selector we want to edit. So by copying the seletor into our new file, and commenting out the path
import, we use the variables from the first import to create a @font-face
-selector without the version string.
And when we compile our Sass, the version string is gone but we still get all the icons. Neat, huh?
Note: This works without webpack aswell, fyi