如何将谷歌的Material Icons 字体中字符用svg格式引用到js文件中

要将谷歌的Material Icons字体中的字符用SVG格式引用到JS文件中，可以按照以下步骤进行：

1.访问Google的Material Icons网站，选择需要的图标，点击“Get the code”按钮，选择“SVG”选项卡，将SVG代码复制到剪贴板。

2.在JS文件中定义一个变量，将SVG代码粘贴到变量中。

var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-2.67 0-5.19-1.04-7.07-2.93s-2.93-4.4-2.93-7.07c0-2.67 1.04-5.19 2.93-7.07s4.4-2.93 7.07-2.93 5.19 1.04 7.07 2.93 2.93 4.4 2.93 7.07-1.04 5.19-2.93 7.07c-1.88 1.89-4.4 2.93-7.07 2.93z"/></svg>';

3.在HTML文件中，使用<i>标签来显示图标，将变量插入<i>标签中。

<i class="material-icons">
  {svgIcon}
</i>

注意：在插入变量时，要使用花括号{}包裹变量名，这表示将变量内容插入到标签中。

相关问题

jeecgboot 框架自定义图标后图标有<i aria-label="图标: icon-Flightfadongji" class="anticon anticon-icon-Flightfadongji">部分，但没有<svg .......</svg>，该怎么办

JeecgBoot框架中，自定义图标如果只是显示`<i>`标签内的文字而没有`<svg>`内容，这通常是由于使用的不是真正的SVG图标，而是Ant Design图标库中的文本描述。Anticon是一个轻量级的图标集，它并不直接提供SVG文件。

如果你需要完整的SVG图标，你需要：

1. 首先确认你的图标是否支持Ant Design的Icon包。如果不是标准的Ant Design图标，你需要找对应的SVG文件，可以在一些在线图标网站（如Font Awesome、Material Icons等）搜索并下载。

2. 将SVG文件替换或添加到你的项目资源目录下，并给图标分配一个名称，例如`flight-fadongji.svg`。

3. 使用Ant Design提供的`@ant-design/icons`库，可以将SVG转换为组件形式。在HTML中，你可以这样做：

   <i :class="{ 'anticon': true, 'anticon-flight-fadongji': true }"></i>

或者在CSS里动态绑定：

   .custom-icon {
     font-family: "anticon";
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
   }
   .custom-icon-flight-fadongji:before {
     content: "\e607"; /* 这里引用你的SVG对应字符编码 */
   }

4. 如果你想完全控制图标样式，也可以直接引入SVG并在CSS中编写样式。

记得更新你的配置，确保Ant Design能够找到你的自定义图标路径。

HTML将表格中的上涨与下降箭头

HTML本身并没有内置的“上涨”或“下降”箭头图标。如果你想在表格中表示上涨或下降，通常会借助于CSS图标、Unicode字符或者通过HTML实体插入特殊箭头符号。例如：

1. CSS图标库：可以使用Font Awesome、Material Design Icons等第三方库提供的"chevron-up" 或 "chevron-down" 类名来添加上升和下降箭头。

<i class="fas fa-chevron-up"></i> 上涨
<i class="fas fa-chevron-down"></i> 下降

或者使用Unicode字符：

<span>&uarr;</span> 上涨
<span>&darr;</span> 下降

2. 图标字体支持（如Webdings或 Wingdings）：

<span style="font-family: 'Wingdings';">↑</span> 上涨
<span style="font-family: 'Wingdings';">↓</span> 下降

但是请注意，这些方法依赖于浏览器是否支持以及用户的设备是否包含相应的字体。如果你需要更一致的体验，建议使用矢量图形（SVG）或者JavaScript生成动态箭头。