Fixing the issue of icons not displaying in the two-tone material in Chrome

Problem of Icons Not Being Displayed in Two-Tone Material in Chrome

If you are working on a project that is facing the issue where the two-tone material icons are not being displayed in the Chrome browser, this indicates a specific problem with the way the CSS files or JavaScript files are loading. Although not displaying icons in the Chrome browser can indeed happen, it is usually a problem that can be resolved with a few simple steps.

Before proceeding with any work, check whether you are using the latest version of the material icons library. There is a possibility that an older version of the software may be incompatible with the latest browsers. Although updating may seem like an easy solution, at times, this can be quite effective.

Make sure that your references to the CSS files and fonts have been correctly integrated into HTML. A common method involves using two specific link elements. Ensure that you are using sources from the HTTPS protocol because many browsers may block HTTP references from a security standpoint.

Sometimes, a person may have disabled their browser in a certain way or have a specific extension installed that prevents the correct display of icons. Check to see if this incident occurs for other users who are using the same browser and operating system as well. If possible, try using a different environment or another browser for your own observation.

Here is a simple example to consider:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">.
<div><span class="material-icons-two-tone">face</span></div>

In the above code: