Determine if Google Material Icons are a worthwhile replacement for Font Awesome

[chrisblakley]

The problem with Font Awesome is that as the library grows in features and versatility, so does the file size footprint. Their solution, which is a good one, is to allow projects to create their own subsets of only the necessary icons. However, because Nebula cannot determine which icons developers will use, it bundles the full Font Awesome Free library. Which includes:

• all.min.css (21kb, 255ms)
• fa-solid-900.woff2 (154kb, 408ms)
• fa-brands-400.woff2 (115kb, ~575ms)
• fa-regular-400.woff2 (25kb, ~514ms)

That is 315kb total and makes these the largest assets in Nebula when combined and two of the woff files are the top 2 largest individual files themselves. This also does not include other variations such as "sharp", and does not include all of the "pro" icons– these are just the free versions.

Now, these assets are loaded (at least by default in Nebula) lazily after the Window Load event, but it is still worth determining if there is a better solution.

Google Material Icons:

• https://fonts.google.com/icons?icon.style=Outlined
• https://developers.google.com/fonts/docs/material_symbols

Some interesting features/benefits

• Can be loaded via Google Fonts
• Uses variable fonts to change properties (so no need to load multiple different libraries)
• Does not have free/pro versions, so all icons are always available

Some caveats with using Google Material icons

• No brand logos are included
• Very different HTML syntax (icons are defined by their inner text not class)

---

Here is one way to bring in an icon using Google Material Icons:

<span class="material-symbols-outlined">&#xE8B6;</span>
<span class="material-symbols-outlined">&#xE88A;</span>
<span class="material-symbols-outlined">&#xE8B8;</span>
<span class="material-symbols-outlined">&#xE87D;</span>

Here is a more intuitive way:

<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">settings</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">favorite_border</span>

---

This would be a major change in Nebula, so this will not be a quick decision. The current plan is to stay with Font Awesome, but this will serve as a place for notes both for/against regardless of how serious the consideration to switch is.

[chrisblakley]

Here is an initial quick test on the same page:

One thing to remember that technically, Google Material Icons would need to be smaller (and load faster) when combined with whatever solution is used for brand icons (such as social media icons), so if those need to use static/local images, then they should be accounted for in speed testing since Font Awesome Brands does include them inherently.

This test shows that FA Solid is at 153kb and Google Material (equivalent to Solid) at 125kb. This is close enough where this may be dead on arrival, and the focus should again be on how to better optimize Font Awesome itself...