In nativescript I have some problem with StackLayout which is in a GridLayout. I cannot align the Label in StackLayout center vertical.

Here is a picture what I would like to achive:

Here you can see, that I want the exclamation icon center vertically.

But unfortunately I keep getting this:

Here is the code I use:

tns.html

<GridLayout class="formMessage warning" columns="auto,*" rows="auto">
  <StackLayout col="0" class="formMessageIcon">
    <Label class="icon fa" [text]="'fa-exclamation-circle' | fonticon"></Label>
  </StackLayout>
  <Label col="1" class="formMessageText" text="lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet" textWrap="true"></Label>
</GridLayout>

CSS

.formMessage {
  width: 100%;
  border-width: 2;
  border-color: #ff344e;
}

.formMessageIcon {
  background-color: #ff344e;
  width: 30;
}

.icon {
  vertical-align: center;
  text-align: center;
  margin-right: 2;
  font-size: 18;
  color: #2b3535;
}

.formMessageText {
  padding: 5 8;
  color: #ff344e;
}

How can I fix the icon centering? What I am doing wrong? Thank you very much!