cssmaterial-uifontsgoogle-material-iconsmaterial-icons

material icons - two-tone icons not showing - in chrome


I use material icons. No changes to the app, and the two-tone icons just stopped showing, specifically in chrome, but seem to work in other browsers (safari, firefox). Material icons work (i.e. class="material-icons"), but not the two-tone icons (class="material-icons-two-tone").

I include fonts in <head> like so, <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">.

Then use in <body> like so, <span class="material-icons-two-tone">assistant</span>, and nothing shows, but if I use <span class="material-icons">assistant</span>, then it works.

This was working fine. Any idea why it's not working only in Chrome? And how to fix it?

Code below to reproduce locally. It should work, but doesn't. Remove "-two-tone" from the class name, and the other font works.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
<style>
</style>
<script src=""></script>
<body>

<span class="material-icons-two-tone">assistant</span>
</body>
</html>


Solution

  • Tested chrome beta for v131 and it works as expected, and looks like it will be released in a few days on Nov 12, 2024 according to the schedule.