ui/webui/resources/cr_elements/cr_icons_css.html

<link rel="import" href="../html/polymer.html">

<!-- Common icon classes for Material Design WebUI. -->
<dom-module id="cr-icons">
  <template>
    <style>
      :host-context([dir=rtl]) :-webkit-any(paper-icon-button-light, .cr-icon) {
        transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
      }

      paper-icon-button-light paper-ripple {
        opacity: 0.6;  /* TODO(dbeam): seems like ripples are too light. */
      }

      :host-context([dark]) paper-icon-button-light paper-ripple {
        --paper-ripple-opacity: .4;
        opacity: 1;
      }

      paper-icon-button-light button {
        display: block;
      }

      paper-icon-button-light,
      .cr-icon {
        @apply --cr-paper-icon-button-margin;
        background-position: center;
        background-repeat: no-repeat;
        background-size: var(--cr-icon-size);
        flex-shrink: 0;
        height: var(--cr-icon-ripple-size);
        user-select: none;
        width: var(--cr-icon-ripple-size);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).no-overlap {
        margin-inline-end: 0;
        margin-inline-start: 0;
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-arrow-back {
        background-image: url(../images/icon_arrow_back.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-cancel {
        background-image: url(../images/icon_cancel.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-cancel-toolbar {
        background-image: url(../images/icon_cancel_toolbar.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-clear {
        background-image: url(../images/icon_clear.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-delete-gray {
        background-image: url(../images/icon_delete_gray.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-delete-white {
        background-image: url(../images/icon_delete_white.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-expand-less {
        background-image: url(../images/icon_expand_less.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-expand-more {
        background-image: url(../images/icon_expand_more.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-external {
        background-image: url(../images/open_in_new.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-menu-white {
        background-image: url(../images/icon_menu_white.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-more-vert {
        background-image: url(../images/icon_more_vert.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-refresh {
        background-image: url(../images/icon_refresh.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-settings {
        background-image: url(../images/icon_settings.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-search {
        background-image: url(../images/icon_search.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-arrow-dropdown {
        background-image: url(../images/icon_arrow_dropdown.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).subpage-arrow {
        background-image: url(../images/arrow_right.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-visibility {
        background-image: url(../images/icon_visibility.svg);
      }

      :-webkit-any(paper-icon-button-light, .cr-icon).icon-visibility-off {
        background-image: url(../images/icon_visibility_off.svg);
      }
    </style>
  </template>
</dom-module>