Best Material icons to use for authorisation

Question

Hi i am using material icons and polymer. I want to use certain icons to show actions i.e. login, register and log out. I'm confused which icons to use. Any help here?

score 3 · Accepted Answer · answered Jun 04 '16 at 21:01

From the set of icons in iron-icons, the following might be appropriate for your use case:

login

logout

register

Usage

Pick an icon from the iron-icons list.
Import the appropriate icons into your HTML head (i.e., iron-icons/${ICONSET}-icons.html, where ${ICONSET} is indicated in the icon name before the colon). Note the icons set is located in iron-icons.html.
```
icons -> iron-icons/iron-icons.html
social -> iron-icons/social-icons.html
places -> iron-icons/places-icons.html
...
```

Enter the icon's name into the icon attribute of a Polymer element, such as <iron-icon> or <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>

^codepen

Best Material icons to use for authorisation

1 Answers1

Usage