用于授权的最佳 Material 图标
Best Material icons to use for authorisation
您好,我正在使用 material 图标和聚合物。我想使用某些图标来显示操作,即登录、注册和注销。我很困惑要使用哪些图标。有什么帮助吗?
在 iron-icons
中的一组图标中,以下可能适合您的用例:
登录
注销
注册
用法
从 iron-icons
list 中选择一个图标。
将适当的图标导入您的 HTML 头部(即 iron-icons/${ICONSET}-icons.html
,其中 ${ICONSET}
表示在图标名称中的冒号之前)。请注意 icons
集合位于 iron-icons.html
.
icons -> iron-icons/iron-icons.html
social -> iron-icons/social-icons.html
places -> iron-icons/places-icons.html
...
将图标的名称输入到 Polymer 元素的 icon
属性中,例如 <iron-icon>
或 <paper-icon-button>
.
<link rel="import" href="iron-icons/iron-icons.html">
<iron-icon icon="icons:exit-to-app">
<link rel="import" href="iron-icons/social-icons.html">
<paper-icon-button icon="social:person-add">
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icons/social-icons.html">
<link rel="import" href="iron-icons/editor-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
</head>
<body>
<div>
<iron-icon icon="icons:exit-to-app"></iron-icon>
<span>icons:exit-to-app</span>
</div>
<div>
<iron-icon icon="icons:lock"></iron-icon>
<span>icons:lock</span>
</div>
<div>
<iron-icon icon="icons:lock-open"></iron-icon>
<span>icons:lock-open</span>
</div>
<div>
<iron-icon icon="icons:lock-outline"></iron-icon>
<span>icons:lock-outline</span>
</div>
<div>
<iron-icon icon="icons:supervisor-account"></iron-icon>
<span>icons:supervisor-account</span>
</div>
<div>
<iron-icon icon="icons:verified-user"></iron-icon>
<span>icons:verified-user</span>
</div>
<div>
<iron-icon icon="icons:account-circle"></iron-icon>
<span>icons:account-circle</span>
</div>
<div>
<iron-icon icon="icons:account-box"></iron-icon>
<span>icons:account-box</span>
</div>
<div>
<iron-icon icon="icons:fingerprint"></iron-icon>
<span>icons:fingerprint</span>
</div>
</div>
<div>
<iron-icon icon="icons:assignment-ind"></iron-icon>
<span>icons:assignment-ind</span>
</div>
<div>
<iron-icon icon="icons:perm-identity"></iron-icon>
<span>icons:perm-identity</span>
</div>
<div>
<iron-icon icon="social:person"></iron-icon>
<span>social:person</span>
</div>
<div>
<iron-icon icon="social:person-add"></iron-icon>
<span>social:person-add</span>
</div>
<div>
<iron-icon icon="editor:mode-edit"></iron-icon>
<span>editor:mode-edit</span>
</div>
</body>
您好,我正在使用 material 图标和聚合物。我想使用某些图标来显示操作,即登录、注册和注销。我很困惑要使用哪些图标。有什么帮助吗?
在 iron-icons
中的一组图标中,以下可能适合您的用例:
登录
注销
注册
用法
从
iron-icons
list 中选择一个图标。将适当的图标导入您的 HTML 头部(即
iron-icons/${ICONSET}-icons.html
,其中${ICONSET}
表示在图标名称中的冒号之前)。请注意icons
集合位于iron-icons.html
.icons -> iron-icons/iron-icons.html social -> iron-icons/social-icons.html places -> iron-icons/places-icons.html ...
将图标的名称输入到 Polymer 元素的
icon
属性中,例如<iron-icon>
或<paper-icon-button>
.<link rel="import" href="iron-icons/iron-icons.html"> <iron-icon icon="icons:exit-to-app"> <link rel="import" href="iron-icons/social-icons.html"> <paper-icon-button icon="social:person-add">
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icons/social-icons.html">
<link rel="import" href="iron-icons/editor-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
</head>
<body>
<div>
<iron-icon icon="icons:exit-to-app"></iron-icon>
<span>icons:exit-to-app</span>
</div>
<div>
<iron-icon icon="icons:lock"></iron-icon>
<span>icons:lock</span>
</div>
<div>
<iron-icon icon="icons:lock-open"></iron-icon>
<span>icons:lock-open</span>
</div>
<div>
<iron-icon icon="icons:lock-outline"></iron-icon>
<span>icons:lock-outline</span>
</div>
<div>
<iron-icon icon="icons:supervisor-account"></iron-icon>
<span>icons:supervisor-account</span>
</div>
<div>
<iron-icon icon="icons:verified-user"></iron-icon>
<span>icons:verified-user</span>
</div>
<div>
<iron-icon icon="icons:account-circle"></iron-icon>
<span>icons:account-circle</span>
</div>
<div>
<iron-icon icon="icons:account-box"></iron-icon>
<span>icons:account-box</span>
</div>
<div>
<iron-icon icon="icons:fingerprint"></iron-icon>
<span>icons:fingerprint</span>
</div>
</div>
<div>
<iron-icon icon="icons:assignment-ind"></iron-icon>
<span>icons:assignment-ind</span>
</div>
<div>
<iron-icon icon="icons:perm-identity"></iron-icon>
<span>icons:perm-identity</span>
</div>
<div>
<iron-icon icon="social:person"></iron-icon>
<span>social:person</span>
</div>
<div>
<iron-icon icon="social:person-add"></iron-icon>
<span>social:person-add</span>
</div>
<div>
<iron-icon icon="editor:mode-edit"></iron-icon>
<span>editor:mode-edit</span>
</div>
</body>