Polymer - Iron Icon
<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 元素中有各种图标集。对于默认图标集，您需要在索引文件中导入 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>
下表显示了用于样式设置的自定义属性−
| Sr.No. | 属性名称和说明 |
|---|---|
| 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/。以下是输出。
polymer_elements.html
