mat-icon right padding? Angular Material

0
votes

Angular Material Icons:

I have a mat-icon that I want to be beside the text. Nothing I do will reduce the space between the icon and the text though.

enter image description here

Based on this HTML :

      <span>
        <mat-icon [inline]="true" style="display:inline;">locked</mat-icon>
        <span AMELIA SMITH</span>
      </span>
1
angularangular-materialmat-icon
Did my answer solved your question? – JSmith

1 Answers

0
votes

remove the inline and add custom css to align the text, current values are not accurate but you could change them

in CSS:

mat-icon {
  vertical-align:middle;
}

.a {
  padding-top:8px;
  vertical-align:middle;
}

or only

mat-icon {
  vertical-align:text-bottom;
}

and in html:

<span>
  <mat-icon >locked</mat-icon>
  <span class="a"> AMELIA SMITH</span>
</span>