Align Label and Icon in same line

Question

I want to show text follwed by an icon.
I'm using material icons.

I want to achieve what it is on the left. But the right side is the one I'm getting.

I tried padding,margin,line height and everything but I couldn't make them align.

The Working webpage for the above issue is here

Html

                <div class="package-rating-detail">
                    <label>{{package.rating}}</label>
                    <mdl-icon class="mdl-color-text--orange">star_rate</mdl-icon>
                </div>

css

.package-rating-detail {
    float: left;
    margin-left: 20px;
}

So how can I align the label and the icon.

score 7 · Accepted Answer · answered Jun 24 '17 at 18:27

Try flex:

.package-rating-detail[_ngcontent-c3] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.3em; // cosmetic
    margin-left: 1em; // cosmetic
}

UPDATE: You can improve the alignment and make it look better by adding some space between the star and the label:

.package-rating-detail[_ngcontent-c3] > label {
    margin-right: 0.2em;
    margin-top: 0.2em;
}

(the margin-top will take the label a bit down, which looks better in my opinion).

Align Label and Icon in same line

1 Answers1