使用代码点渲染轮廓图标，而不是从 Material Design Google Fonts 中填充

Question

我有一个来自 Material Icons Google Fonts 的 Place 图标，它是使用

before

伪选择器和代码点

e55f

渲染的。

问题是正在渲染填充版本：

而不是我想要的概述版本：

有没有办法可以使用代码点来使用概述的版本？

来自 Codepen 的演示在这里

<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>

Answer 1

只需更改

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>