FontAwesome-like fixed width on Material Design Icons

Question

I'm pretty set on using Material Design Icons for the simple fact that they have a lot more IT oriented icons so it just makes things much easier. I'd like to achieve something similar to FontAwesome's Fixed Width feature, which ensures there's an even space after the icon that remains consistent.

How icons currently look:

How I want the icons spaced:

As far as I can tell so far, however, MDI does not offer this (or I'm missing it), so what are some ways to achieve something similar efficiently without hacking with !important or setting unnecessary margins?

Store-Info CSS:

.heading-block {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1em;
margin: 5px 0;
}

.heading-content > .store-info p {
font-weight: 600;
font-size: 1em;
line-height: 10px;
margin: 1.7em 0;
}

.heading-content > .store-info {
margin-left: 1.5em;
}

Store Info HTML:

<div class="heading-content">
    <div>
        <span contenteditable="true" id="store-number" class="store-number">{{ store.store_number }} </span><span class="divider">/</span><span class="store-name">{{store.name}}</span>
    </div>
    <div class="store-info">
        <p id="address_full"><span class="mdi mdi-map-marker"></span>{{ store.street_address }} {{ store.city }}, {{ store.state }} {{ store.postal }}</p>
        <p id="address_pull_hidden" style="display:none;">{{ store.street_address }} {{ store.city }} {{ store.state }} {{ store.postal }}</p>
        <p>
            <span class="mdi mdi-earth"> </span>
            {{ store.timezone }}
        </p>

        <p>
            <span class="mdi mdi-phone"></span>
            {{ store.phone }}
        </p>

        {% if not store.mpls_only %}
        <p>
            <span class="mdi mdi-phone-voip"></span>
            {{ store.xo_tn }}
        </p>
        {% endif %}

        {% if store.mpls_only %}
        <p>
            <span class="mdi mdi-phone-classic"></span>
            MPLS Only
        </p>
        {% endif %}


        <p>
            <span class="mdi mdi-map-marker"></span>
            <span id="local-time">00:00:00 am</span>
            <span class="status open">{{ store.status }}</span>
        </p>

        <p class='store-closed' style="display: none;">
            <span class="mdi mdi-map-marker"></span>
            Close Reason: <span class="close_reason">{{ store.close_reason }}</span>
        </p>

        <p class="weather"><span class="mdi mdi-weather-cloudy"><span id="weather-main">Clear</span></p>
        <a target='_blank' class="edit" href="/admin/stores/store/{{store.pk}}/change/">Edit information for Store {{store.store_number}}</a>
    </div>
</div>
<br>
<div id="map-wrapper">
    <div id="map-container" class="container">
        <div id="map"></div>
        <div id="pano"></div>
    </div>
</div>

Thanks in advance, & worth noting I'm not much of a front end guy so if you see something that seems odd, feel free to mention it!

Answer 1

You can create a class to make that happen.

.mat-fw {
text-align: center;
width: 1.25em;
}