Search code examples
htmlcssangularmat-icon

Position icon next to text

I have created a div which shows an icon and text but I need to get the icon next to the text instead of above it. Currently looks like this:

enter image description here

And I need the icon to be next to the text like this (the icon needs to be displayed to the left of the text without moving the text so the header still aligns with the phone number):

enter image description here

Code:

    <div fxLayout="row" fxLayoutAlign="space-around center">
            <div>
                <mat-icon svgIcon="phone-outline"> </mat-icon>
                <h3>Customer Support</h3>
                <label>123456</label>
            </div>
         <div>
            <mat-icon svgIcon="email-outline"> </mat-icon>
            <h3>Email</h3>
            <label>[email protected]</label>
        </div>
        <div>
            <mat-icon svgIcon="map-marker-outline"> </mat-icon>
            <h3>Address</h3>
            <label>address line 1</label>
        </div>
   </div>

I have three divs and using fxLayoutAlign aligns them next to each other accoss the page but if I put the icon into a seperate div the fxLayoutAlign moves it too far across the page. Is there a better way to align the divs?

Tried so far:

  1. Tried putting the icon on the same line as the text but that puts the icon too close to the text: <h3><mat-icon svgIcon="phone-outline"> </mat-icon> Customer Support</h3>

enter image description here

I need to have space between the icon and text and align it with the text.

  1. Using CSS to try align still causes the icon to be too close to the text (and not aligned correctly): .align-items { display: flex; justify-content: space-between; } .align-content { display: flex; align-items: center; }

enter image description here

Moving the icon in CSS using margins looks like its working but it has now moved the second line with the phone number:

enter image description here

The phone number should be directly under the header text (like in first screenshot above)

Solution

  • Here is another approach with pure css.

    css

    .align-items {
  display: flex;
  justify-content: space-between;
}

.align-content {
  display: flex;
}

mat-icon {
  margin-right: 10px;
}

.align-text-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h3 {
  margin-top: 0px;
}

    html

    <div class="align-items ">
    <div class="align-text-item">
        <div class="align-content">
            <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
            <div>
                <h3>Customer Support</h3>
                123456
            </div>
        </div>
    </div>
    <div class="align-text-item">
        <div class="align-content">
            <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
            <div>
                <h3>Email</h3>
                123456
            </div>

        </div>

    </div>
    <div class="align-text-item">
        <div class="align-content">
            <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
            <div>
                <h3>Address</h3>
                123456
            </div>
        </div>
    </div>
</div>