离子列表中如何在菜单图标上使用分隔线？

Question

我希望在上面的图像中的图标下方也有一个标记为分隔符的行，就像在第二个图像中一样。

这是我的离子列表代码：

app.html：

<ion-list >

  <button  class="menu-text" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    <ion-icon [name]="p.icon" class="icon-color" item-left> </ion-icon> 
    {{ p.title }}
  </button>


</ion-list>

app.component.ts：

 this.pages = [
  { title: 'My Profile', component: MyprofilePage , icon: 'md-person'},
  { title: 'My Goals', component: MygoalsPage, icon: 'md-flag' }, 

];

app.scss：

 .icon-color{
    color:#8ad5ef;
    font-size: 1px; 

}

.menu-text{
    color:#8ad5ef;
    font-size: .9em; 
}

我应该怎么做才能获得理想的效果？

Answer 1

尝试这样

<ion-list>
  <button no-padding ion-item icon-right *ngFor="let p of pages" (click)="openPage(p)">
    <ion-icon [name]="p.icon" class="icon-color"> </ion-icon> 
    {{ p.title }}
  </button>
</ion-list>

演示link