0

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>
Ricardo Castañeda
  • 5,746
  • 6
  • 28
  • 41

1 Answers1

1

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>
Kosh
  • 16,966
  • 2
  • 19
  • 34