聚合物 - 铁图标

上一个
下一个

<iron-icon> 元素用于显示单个图标。默认图标大小为 24px 见方。

可以使用 src 显示图标，如下所示 -

<iron-icon src = "icon.png"></iron-icon>

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

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

您还可以通过创建自定义图标集来使用图标，如下所示 -

<iron-icon icon = "fruit:berry"></iron-icon>

以下表格显示了用于样式的自定义属性 -

编号。 属性名称 & 说明
1

--iron-icon

应用于图标的混编。默认值为 {}
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 元素，请导航到命令提示符中的项目文件夹并使用以下命令 -

bower install PolymerElements/iron-icon --save

以下示例演示了 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 serve

现在打开浏览器并导航到 http://127.0.0.1:8081/。以下是输出。

Iron Icon
polymer_elements.htm
打印页面
上一个
下一步
广告