ionic v2ボタンのテキストの整列

Question

私のionic v2アプリでは、アイコンとテキストを含む複数のボタンがあります。 v1のIonicを使用すると、ボタン内のアイコンとテキストをパラメータに揃えることができました。

<a class="item item-icon-left item-assertive"> 
    <i class="icon ion-gear"></i> 
    SomeTextForExample 
</a> 

v2の場合、アイコンとテキストの間にわずかなギャップが追加される 'icon-left'のパラメータが見つかりませんでした。とにかく、ボタンステイの内容は中央に置かれます。ここで

はV2からの私のhtmlコードです：

<button ion-button block icon-left color="danger"> 
    <ion-icon name="car"></ion-icon> 
    TextFoo 
</button> 

私はngForと読みやすいクリック機能を削除しました。簡単なソリューションの可能性はありますか？

Answer 1

<button ion-button block icon-left color="danger"> 
    <ion-icon name="car"></ion-icon> 
    TextFoo 
</button> 

これは機能するはずです。 <ion-icon>'s nameプロパティで有効な名前を指定していることを確認してください。例：<ion-icon name="star"></ion-icon>

Answer 2

私が知る限り、我々はボタンのためにいくつかのCSSを使用することができますitem-endかicon-leftでそれを解決するために、「法的」な方法を持っていないようアンドロイド< V4.4

Answer 3

上でこの問題を抱えていました。

<button ion-button block icon-left color="danger" class="btn-align"> 
    <ion-icon name="car"></ion-icon> 
    TextFoo 
</button> 

とクラスの問題が何であるかを確認してください

.btn-align { 
    .button-inner { /*< --- this class added automatically */ 
     justify-content: flex-start; 
    } 
}