core-icons 包含不同的图标集,例如
- 图标
- av-图标
- 通讯图标
- 设备图标
- 硬件图标
- 图像图标
- map 图标
- 通知图标
- png-图标
- 社交偶像
如何使用它们并不明显。
最佳答案
这里是纸元素中包含的图标的概述 http://polymer.github.io/core-icons/components/core-icons/demo.html
我创建了一个示例来演示如何使用它们。
<!DOCTYPE html>
<html>
<head>
<title>core-icons</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<!-- choose the name according to the set you want to load - "social-icons" -->
<!-- this is now accessible with a simpler path
<link rel="import" href="packages/core_elements/src/core-icons/iconsets/social-icons.html">
<link rel="import" href="packages/core_elements/core_icons/iconsets/social_icons.html">
this changed again with core-elements 0.2.0+1 -->
<link rel="import" href="packages/core_elements/social_icons.html">
</head>
<body>
<!-- use the icon by setting the `icon` attribute. The value consists of iconsset-id a colon followed by the icon name. -->
<paper-icon-button id="bookmark-button" icon="social:plus-one" style="fill:steelblue;"></paper-icon-button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
编辑
您可以像这样从 Dart 代码中设置图标的样式
($['bookmark-button'] as dom.Element).querySelector('* /deep/ #icon').style
..setProperty('fill', 'red')
..setProperty('stroke', 'blue')
..setProperty('stroke-with', '3px');
事实证明这有点棘手,因为 paper-icon-button
不止一个shadowRoot
(实际上是 3 个)当我在 <g>
上设置样式时元素(在 <core-icon>
内)它被应用但不久之后由于未知原因恢复。
我刚刚看到这在 Firefox 中不起作用。 /deep/
的 polyfill在querySelector()
据我所知,这项工作正在进行中。一旦当前的 Polymer 版本集成到 Polymer.Dart 中,它可能会工作得更好。
这在 Dartium 和 Firefox 中都有效:
($['bookmark-button'] as dom.Element).shadowRoot.olderShadowRoot.querySelector('#icon').style
..setProperty('fill', 'red')
..setProperty('stroke', 'blue')
..setProperty('stroke-with', '3px');
此解决方案可能会在执行 <paper-icon-button>
时中断已更改,但希望不久后第一次尝试将很快在所有浏览器中运行。
编辑
Polyfill 支持/deep/
在querySelector
包含在 Polymer.js 0.4.0 中.希望下一个 Polymer.dart 更新也包括它。
关于dart - 如何在 Dart 中使用不同的核心图标图标集?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24788347/