Issues with displaying two-tone Material icons in Chrome

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>
            

Answer №1

Just tried out chrome beta for version 131 and everything is running smoothly. It appears that the official release is set for Nov 12, 2024 as listed on the official schedule.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The padding on the parent element's ::after pseudo-element appears to be overlooked by Firefox

I am facing an issue with positioning a down arrow using the ::after element. While it works perfectly in most browsers, Firefox seems to be causing trouble. Here is how it appears in Firefox: https://i.sstatic.net/tvpbr.jpg And here is how it looks in C ...

How can the Drawer be selectively removed from specific routes while using Material-UI with react-router-dom?

My approach involves setting all routes as children of Material UI's Drawer, utilizing them as props. However, I'm facing an issue with the login page not being able to display the Drawer. How can I restructure the login route to exclude the draw ...

Modify the width of the <nz-date-picker> component from Ng-Zorro

Currently using Ng-Zorro for my template styling and working on implementing a date picker that I want to align perfectly with the dropdown menu above it. I would like to adjust the width of the date-picker manually within the template, but after visiting ...

Using a border-radius on Internet Explorer 11 reveals the background through the corners

Encountering issues with rounded borders in IE 11 (11.0.9600.18350)? Check out this minimal fiddle for more information: https://jsfiddle.net/7phqrack/2/ Here's the HTML code snippet: <div class="backgrounddiv"> <div class="outer"> ...

Why isn't my page width adjusting to various screen resolutions?

Hello everyone, I'm currently working on a website using two monitors - one with 1920x1080 resolution and the other with 1440x900 resolution. However, the website doesn't seem to fit properly on the 1440x900 screen. I've used percentage widt ...

The issue persists with the flex item not occupying the full height of the screen despite using "align-items: stretch"

When using flex-direction: row; on the body element, I expect that setting align-items: stretch; will vertically stretch the child item to fill the screen height. However, for some reason this is not happening. Below is a simple example of what I am tryin ...

Expansive background with adaptable height dimensions

Is there a way to use Foundation to create a header with a full-width image and responsive height using CSS only, or do I need to use JavaScript for this? Can someone assist me with this? This is the code from index.html: <!doctype html> <html ...

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

What is the best method to extract the computed styles of a native DOM HTML element into a string format

I am facing a requirement where I need to send a table (UI) via email. I attempted to retrieve the native HTML DOM element by using document.querySelector('table'), but it appeared without styles. As a result, the email does not resemble the UI a ...

Creating a Dual Linear Gradient Background with Tailwind: Step-by-Step Guide

Can you use two linear backgrounds on a single element in Tailwind CSS? I found this CSS code that seems to achieve it: background-image: linear-gradient(to right, #f8fafb 50%, #161616 50%), linear-gradient(to right, #161616 50%, #f8fafb 50%); I att ...

Is there a sizing issue plaguing Chrome browsers?

Have you noticed any issues with Chrome version 16.0.912.63? I have applied the following CSS: #wholesale { margin: 0px 0px; width: 930px; text-align: center; display: table; border-top: 12px solid; line-height: 24px; } However, I am encountering a prob ...

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

reason behind text styling: thick 12 pixels height with line spacing of 25 pixels using "Arial" font

Question about CSS Size: Understanding font sizes in CSS {font: 14px/24px Arial, Helvetica, sans-serif} I've noticed some CSS code like this on the website .selector {font: bold 12px/25px "Arial";} I know that 'bold' refers to font w ...

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

Place the Button and IconButton elements side by side within the row

Can anyone help me figure out how to display a Button next to an IconButton in the same row within a Grid container with the align="center" prop? I'm new to material-ui and have tried multiple solutions without success. Any assistance would be greatly ...

Looking to capture the final value of a React slider's onChange event?

I'm looking for a way to retrieve the values of material ui sliders only when they have finished moving, instead of on every change. Is there a method to achieve this without having to use a submit button? The material ui demo linked below showcases ...

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

Swapping IMG depending on breakpoint in Material-UI

I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...

Tips for increasing the height of a ghost image for an HTML draggable element

I'm currently working on a scheduling calendar that allows users to book time slots and easily drag and drop them to adjust the time. Each time slot is represented as a draggable HTML element. However, I've noticed a problem where the preview ima ...