Polymerjs iron图标iron-icon

Polymerjs iron 图标元素用于显示单个图标。其默认图标大小为24像素。
它显示为：

< iron-icon src = "http://www.srcmini.com/icon.png"> < /iron-icon>

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

< iron-icon class = "big" src = "http://www.srcmini.com/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 = "http://www.srcmini.com/components/iron-icons/iron-icons.html"> < iron-icon icon = "android"> < /iron-icon>

通过导入iron-icons / < iconset> icons.html文件并将图标定义为< iconset> ：< icon> , 我们还可以使用不同的内置图标集。
示例：通信图标的代码

< link rel = "import" href = "http://www.srcmini.com/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 = "http://www.srcmini.com/webcomponentsjs/webcomponents-lite.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/iron-icons/iron-icons.html"> < link rel = "import" href = "http://www.srcmini.com/iron-icon.html"> < /head> < body> < h2> Iron-Icon Example< /h2> < iron-icon icon = "android"> < /iron-icon> < /body> < /html>

【Polymerjs iron图标iron-icon】输出