In my app, I am facing an issue with the two-tone material icons not showing up on Chrome, while they work fine on Safari and Firefox. The regular material icons are displayed correctly. I have included the required fonts in the head section of the HTML like this:
<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">
.
To use the two-tone icons in the body section, I am using the following code:
<span class="material-icons-two-tone">assistant</span>
However, the two-tone icons are not displaying in Chrome, but if I switch to the regular material icons like this:
<span class="material-icons">assistant</span>
, they appear without any issues.
This functionality was working without any problems before. Can anyone help me identify why it's only failing on Chrome and provide a solution to fix it?
For code replication locally (which should be functional), please refer below. When removing "-two-tone" from the class name, the other font works appropriately.
<!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>