1

嗨,我正在使用材料图标和聚合物。我想使用某些图标来显示操作,即登录、注册和注销。我很困惑要使用哪些图标。这里有什么帮助吗?

4

1 回答 1

3

从 中的一组图标中iron-icons,以下内容可能适合您的用例:

登录

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

登出

在此处输入图像描述

登记

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

用法

  1. iron-icons列表中选择一个图标。

  2. 将适当的图标导入您的 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
    ...
    
  3. 在 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>

密码笔

于 2016-06-04T21:01:57.420 回答