srcminiPolymerjs iron 图标元素用于显示单个图标。其默认图标大小为24像素。
它显示为：
<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>我们还可以创建自定义项目并使用它：
<p><iron-icon icon = "fruit:berry"></iron-icon></p>让我们看看用于样式的自定义属性：
表：
| Index | 自定义属性 | Description |
|---|---|---|
| 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元素, 请在命令提示符下导航至你的项目文件夹, 然后使用以下命令-
bower install PolymerElements/iron-icon -save
以下示例演示了iron 图标元素的使用：
<!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>输出
评论前必须登录！
注册