Angular(Ionic)で要素を横にスクロールできるように並べる

div[scrollX] {
    white-space: nowrap;
    height: 120px;
    overflow: hidden;

    .scroll-item {
      display: inline-block;
    }

    .selectable-icon{
      margin: 10px 20px 10px 20px;
      color: red;
      font-size: 100px;
    }

    ion-avatar img{
      margin: 10px;
    }
    overflow-x: auto;
  }

  div[scroll-avatar]{
    height: 60px;
  }

  /* Hide ion-content scrollbar */
  ::-webkit-scrollbar{
    display:none;
  }

  <ion-row>
    <ion-item no-lines>
      <div scrollX="true">
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
        <ion-icon name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
      </div>
    </ion-item>
  </ion-row>