Search code examples
htmlcssmaterial-designgoogle-fontscodepoint

Using code point to render outlined icon instead of filled from Material Design Google Fonts

I have a Place icon from Material Icons Google Fonts that is rendered using a before pseudo-selector and the code point e55f.

The problem is that is being rendered the filled version:
Material Design location filled icon

Instead of the outlined version I want:
Material Design location outlined icon

Is there a way I can use the outlined version using code point?

Demo from Codepen here

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

<div class="place"></div>

<style>
  .place::before {
    content: "\e55f";
    font-family: 'Material Icons';
  }
</style>
Solution

  • Just change the font-family: 'Material Symbols Outlined'; :

    .place::before {
  content: "\e55f";
  font-family: 'Material Symbols Outlined';
}
    <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" as="style" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div class="place"></div>