Полимер: разные стили основных кнопок

Question

Я хочу добавить две основные иконки-кнопки: одна справа вверху (пользовательского) полимерного компонента открытки, а другая внизу в центре. Как мне это сделать? Текущий код применяется к обеим основным кнопкам (ниже). Есть ли способ квалифицировать стиль core-icon-button по типу иконки?

<template>
  <style>
....
  core-icon-button { 
      content: '.icon clear';
      position: absolute;
      top: 3px;
      right: 3px;
      color: blue;
    }
....
</style>


<core-icon-button icon="clear"></core-icon-button>
<core-icon-button icon="thumb-up"></core-icon-button>
</template>

Answer 1

Для этого вы можете использовать стандартные хорошо известные идентификаторы / классы HTML-элементов:

<template>
  <style>
    .clearbtn { color: white }
    #thumbupbtn { left: 100px }
  </style>

  <core-icon-button class="clearbtn" icon="clear"></core-icon-button>
  <core-icon-button id="thumpupbtn" icon="thumb-up"></core-icon-button>
</template>

Вы можете также использовать селекторы CSS для этого:

<style>
  core-icon-button[icon="clear"] { color: white }
  core-icon-button[icon="thumb-up"] { left: 100px }
</style>

Надеюсь, поможет.