Skip to content

Instantly share code, notes, and snippets.

@moso
Last active May 21, 2024 00:45
Show Gist options
  • Save moso/7c7fb652dabbd41f26792fcc8535ff83 to your computer and use it in GitHub Desktop.
Save moso/7c7fb652dabbd41f26792fcc8535ff83 to your computer and use it in GitHub Desktop.
Sass: remove the Material Design Icons cache-busting version string

Removing the cache-busting version string from Material Design Icons with Sass

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

@import 'node_modules/mdi/scss/variables';
@import 'node_modules/mdi/scss/functions';
//@import 'node_modules/mdi/scss/path';
// 'path'-file fixes
@font-face {
font-family: '#{$mdi-font-name}';
src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot');
src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?#iefix') format('embedded-opentype'),
url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff2') format('woff2'),
url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff') format('woff'),
url('#{$mdi-font-path}/#{$mdi-filename}-webfont.ttf') format('truetype'),
url('#{$mdi-font-path}/#{$mdi-filename}-webfont.svg##{$mdi-filename}#{$mdi-font-weight}') format('svg');
font-weight: normal;
font-style: normal;
}
@import 'node_modules/mdi/scss/core';
@import 'node_modules/mdi/scss/icons';
@import 'node_modules/mdi/scss/extras';
@import 'node_modules/mdi/scss/animated';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment