Polymer iron-icon

17 Mar 2025 | 阅读 2 分钟

Polymer iron-icon 元素用于显示单个图标。其默认图标大小为 24 像素。

它显示为

以下代码显示如何设置图标的大小。

<iron-icon class = "big" src = "big_icon.png"></iron-icon>
<style is = "custom-style">
   .big {
      --iron-icon-height: 20px;
      --iron-icon-width: 20px;
   }
</style>

在 iron 元素中有各种图标集。您必须在索引文件中导入 iron-icons.html 文件以获取默认图标集，并使用 icon 属性，如下面的命令所示来定义图标。

<link rel = "import" href = "/components/iron-icons/iron-icons.html">
<iron-icon icon = "android"></iron-icon>

我们还可以通过导入 iron-icons/<iconset>icons.html 文件来使用不同的内置图标集，并将图标定义为 <iconset>:<icon>。

示例：通信图标的代码

<link rel = "import" href = "/components/iron-icons/communication-icons.html">
<iron-icon icon = "communication:email"></iron-icon>

我们也可以创建自定义项目并使用它

让我们看看用于设置样式的自定义属性

表

索引	自定义属性	描述
1)	--iron-icon	它是一个应用于图标的 mixin。其默认值为 {}
2)	--iron-icon-width	它指定图标的宽度。其默认值为 24px。
3)	--iron-icon-height	它指定图标的高度。其默认值为 24px。
4)	--iron-icon-fill-color	用于填充 SVG 图标颜色的属性。其默认值为 currentcolor。
5)	--iron-icon-stroke-color	用于填充 SVG 图标描边颜色的属性。

示例

要使用 iron-icon 元素，请在命令提示符下导航到您的项目文件夹，然后使用以下命令 -

以下示例演示了 iron-icon 元素的使用

<!DOCTYPE html>
<html>
   <head>
      <title>iron-icon</title>
      <base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/iron-icon/v1.0.13/iron-icon/">
      <script src = "../webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "../iron-icons/iron-icons.html">
      <link rel = "import" href = "iron-icon.html">
   </head>

   <body>
      <h2>Iron-Icon Example</h2>
      <iron-icon icon = "android"></iron-icon>
   </body>
</html>

输出

下一个主题可滑动容器

Polymer iron-icon

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Polymer 教程

Polymer 元素

App 元素

Iron 元素

Paper 元素

Google 组件

Gold 元素

Neon 元素

Platinum 元素

自定义元素

Shadow DOM & 样式

Polymer 事件

Polymer 数据系统

Polymer 工具

Polymer iron-icon

示例

相关帖子

Iron A11y 键

Iron Ajax

Iron 表单

Iron 弹性布局

可滑动容器

Iron 折叠

Iron 图像

Iron 元素

Iron 下拉

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器