htmlmaterial-designgoogle-material-icons

How to fix material icons displaying as text

I need help with Material icons that are displaying as text.

I have linked to material-icons font library in the section my HTML file, but issue still exists.

I intend to use the sharp icons and I have included that in my material icons link.

Regardless, I can't get the icons to display. All that is shown is text in place of the icons How do I fix this? Or where I'm I going wrong?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width" , initial-scale="1.0">
  <title>Sales Dashboard</title>
  <!-- Material cdn-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
  <!-- stylesheet-->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <aside>
      <div class="top">
        <div class="logo">
          <img src="./images/logo.png" alt="">
        </div>
        <div class="close" id="close-btn">
          <span class="material-symbols-sharp">close</span>
        </div>
      </div>
      <div class="sidebar">
        <a href="#">
          <span class="material-symbols-outlined">dashboard</span>
          <h3>Dashboard</h3>
        </a>
        <a href="#">
          <span class="material-symbols-outlined">dashboard</span>
          <h3>Detail Report</h3>
        </a>
        <a href="#">
          <span class="material-symbols-outlined">person</span>
          <h3>Team Member</h3>
        </a>
        <a href="#">
          <span class="material-symbols-sharp">trending_up</span>
          <h3>Top Selling Products</h3>
        </a>
        <a href="#">
          <span class="material-symbols-sharp">payments</span>
          <h3>Expenses</h3>
        </a>
        <a href="#">
          <span class="material-symbols-sharp">logout</span>
          <h3>Logout</h3>
        </a>
      </div>
    </aside>
  </div>
</body>

</html>

Solution

  • You have to use the correct URLs for both the outlined and sharp variants as provided by the documentation.

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />  


    <!-- Material cdn-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />


<span class="material-symbols-sharp">close</span>
<span class="material-symbols-outlined">dashboard</span>
<span class="material-symbols-outlined">person</span>
<span class="material-symbols-sharp">trending_up</span>
<span class="material-symbols-sharp">payments</span>
<span class="material-symbols-sharp">logout</span>