Material Icons

[Rohit_Nz (Gupta Rohit)]

I am thinking of using the Material Icons for the PWA. I don't want to pull the whole file in. I see that I can download a symbol as svg.

• Is there a way to download only the symbol file you are using (in html)?
• Any suggestions are welcome

[AndrewSimard]

How many icons are you planning to use? There are a lot of options here.

One is to just include the underlying WOFF file in your project and load it that way, so it works offline. Great for when you use a lot of the icons. Eg: javascript - How to host material icons offline? - Stack Overflow

Or you can download the SVG files for each icon and use them directly in your code. Great for when you only need a small handful of icons, as they are only a couple of hundreds of bytes each. These images can then be added to your project like any other images.

Might be other options depending on what it is you're trying to do? Been a long time since I played with the JS Libraries function, but it might be that you can more easily include the font packages in your project directly that way as well.

[brunofierens]

Yes, it's possible to download only the specific Material Icons you use, which can significantly reduce the overall size of your project. Here are a few approaches to achieve this:

1. Use the Material Symbols API

Google provides the Material Symbols API, which allows you to selectively include only the icons you use by referencing them directly. For example:

html

Copy code

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<span class="material-symbols-outlined">home</span>

In this case, only the home icon is loaded because the request specifies that single icon.

---

2. Download Specific Icons Manually

You can manually download the SVG or PNG files for the icons you need from the Material Design Icons website. After downloading, include these icons in your project as:

• Inline SVGs:

html

Copy code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..."></path></svg>

• As Image Files:

html

Copy code

<img src="path/to/home-icon.svg" alt="Home Icon" />

---

3. Use a Custom Icon Font

If you prefer using a font-based approach and want only the specific icons, you can use tools like:

• IcoMoon: Import the Material Icons you need into the IcoMoon app, and it will generate a custom font containing only those icons.
• Fontello: Similarly, you can create a custom font file containing only your chosen icons.

Include the generated font files in your project and use them with @font-face or CSS classes.