Importing specific material icon

Question

I am creating a web application which uses Google's Material Icons. Nearly all of the icons I use are of the default 'filled' style, and 1 one is of the 'outlined' style. I import the icons with the following CSS code:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|');

This imports two .woff font files, one for the default 'Material Icons' font-family, and one for the 'Material Icons Outlined' family.

Given that I am only using 1 icon from the outlined family, is there a way to only import that specific icon, instead of importing the entire collection (without saving locally)?

Any help is appreciated

Answer 1

To just import the 'filled' font remove |Material+Icons+Outlined| from the url.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

There's no official CDN that allows you to just grab one image from the web, so you'd need to download the png or svg from icon library and host it yourself.

Note that the each font file is only around 60KB-80KB (click links below to see for yourself), so if you're doing this to improve load time it's likely not going to make a huge difference.

filled woff2 outline woff2.

Answer 2

I ran into a similar issue, but decided to host the icon myself.

Didn't want to add a custom font-face, so downloaded the icon, edited the fill="black" parameter inside the SVG to match the color I was after and simply used it in an img tag <img src="assets/delete-icon.svg">.