How to host material icons offline?

web-development

responsive-design

performance

best-practices

byAnton Shumikhin·Jan 12, 2025

To host Material Icons offline, you'd consider downloading the icon font files and their corresponding CSS. You then store them in your project's assets. Next, link the local CSS in your HTML:

<!-- A ticket to your treasure -->
<link rel="stylesheet" href="your-assets-folder/material-icons.css">

Now, make sure @font-face in your CSS directs to the local font files:

@font-face {
  font-family: 'Material Icons';
  /* Pointing fingers to the assets */
  src: url('your-assets-folder/MaterialIcons-Regular.woff2') format('woff2'),
       url('your-assets-folder/MaterialIcons-Regular.woff') format('woff'),
       url('your-assets-folder/MaterialIcons-Regular.ttf') format('truetype');
}

Now that setup's done, insert icons with:

<!-- Sprinkle some "face" onto it -->
<i class="material-icons">face</i>

Voila! You now have offline icon availability, no more dependence on external servers, and likely shorter load times.

Guided steps: How to install

Utilising Material Icons offline involves navigating a few steps:

Download the latest release (3.0.2 or beyond) from the GitHub repository.
Decompress the release and transfer the 'icons' and 'font' folders into your asset directory.
Substitute the CDN URLs with relative paths mentioned in the CSS @font-face rules.
Vigorously test your application to ensure every icon displays as it should, even in offline mode.

Tip: Using Bower or npm can simplify recurring updates and effectively manage dependencies.

Exploring alternatives: What else is out there?

Sometimes, even Native Material Icons might fall short of your project's demands. Fear not, here are alternative paths:

Community Maintained Projects: Enriched with active development.
Custom Icon Fonts: Think of Fontello and IcoMoon. Tailor all you want.
CSS Frameworks: Some provide their sets of Material Design inspired icons.

Choose wisely based on your needs and want.

Integrating with Angular: The Extra Mile

For those of you building within an Angular environment, you might need an alternate approach:

Install material-icons-font npm package. It's dedicated to Angular work.
Embed into Angular applications:
- Insert the package CSS into either angular.json or styles.scss.
- If necessary, use Webpack to wrangle the dependencies.

Cross-browser compatibility: Don't leave anyone behind

In the clockwork of hosting icons, font format is a cornerstone for universal browser compatibility:

WOFF2: Highly condensed and modern. Web-compatible.
WOFF: Oldie but goodie. Supports a broader browser range.
TTF: Catering to legacy browsers that snub at WOFF formats.

Stack multiple formats in your @font-face rule. No browser left without icons.

Pro tips: Keeping your ducks in a row

Improve your workflow with these additional handy tips:

Stay up-to-date: Use the latest version. Big on features, less on issues.
Fallback plan: In case of misfires, use local('Material Icons').
Keep an eye out: Monitor community-kin projects for off-road updates.
Rulebook: Stick to the licenses when wielding the icon fonts.

Potential hiccups: Keep a fix handy

Here are some common challenges and their solutions:

Broken paths: Double-check file paths during deployment. Avoid dead ends.
Weighing down performance: Be sure to optimize load times and streamline asset delivery.
Cross-browser testing: Verify icons for cross-browser compatibility. No room for surprises.

explain-codes / Web development / How to host material icons offline?

Linked

Applying a single font to an entire website with CSS



Font Awesome not working, icons showing as squares



How to use glyphicons in bootstrap 3.0



Font Awesome icons are not working, I have included all required files



Font Awesome icon inside text input element

