htmlcssfontsmaterial-icons

Icons arent showing when importing from google fonts to html, just the text is

I am trying to import icons from google fonts but instead of the icon displaying just the name of it is.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,1,0&icon_names=phone_enabled" />
<section id="'footer" class="page">
  <div class="socials"></div>
  <div class="contact-details">
    <div>phone_enabled</div>
    <span class="material-symbols-outlined">
      phone_enabled
      </span>
    <div></div>
  </div>
</section>

current output

Solution

  • I assume this is related to google fonts agent detection. Unfortunately some browsers are still listed as not-supporting variable fonts – e.g. Opera - albeit supporting variable fonts for many years.

    Workaround:

    1. open the Material UI in a supported browser to generate the URL
    https://fonts.google.com/icons?icon.size=24&icon.query=phone_enabled

    I'm only aware of Opera causing troubles so any other browser should work fine

    The URL should contain .. variable font separators

    https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=phone_enabled

    Open this URL and copy the @font-face rule

    @font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/icon/font?kit=kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsL7DrI5fG7hpcApX7057vgLpdAv&skey=b8dc2088854b122f&v=v254) format('woff2');
}  


    @font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/icon/font?kit=kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsL7DrI5fG7hpcApX7057vgLpdAv&skey=b8dc2088854b122f&v=v254) format('woff2');
}


.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
    <span class="material-symbols-outlined">phone_enabled</span>

    This would also work in Opera.