CSS Angular 2 материальные компоненты для dart. Как центрировать глиф?

HTML:

<div class="border">
    <glyph  class="center" [icon]="'star'" ></glyph>

    <div class="centerText">
        This Is Text that is centered.
    </div>
</div>

стиль CSS:

.centerText{
    text-align: center;

}

.border{
    border: solid black;
    width: 80px;
}

.center{
    margin-left: 50%;
}

Результат:

Я пытаюсь центрировать значок глифа из https://github.com/dart-lang/angular2_components

Как центрировать символы?

В https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/glyph/glyph.scss.css код использует flexbox в css — > display: inline-flex

Левое поле как бы центрирует его, но это выглядит плохо, когда ширина меньше. Есть вещи, которые не работают:

text-align: center

и

align-items: center;
justify-content: center;

и

display:block;
margin:auto;