0

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:

enter image description here

How I want the icons spaced:

enter image description here

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!

James Coyle
  • 9,922
  • 1
  • 40
  • 48
CodeSpent
  • 1,684
  • 4
  • 23
  • 46
  • If you are willing to slightly change your HTML, you could use [`grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) with 2 columns. – James T Mar 02 '19 at 16:31
  • I kind of want something that can be applied to `mdi` to make it consistent site wide, not just in this section. Even a reference to how FA adds this in their fixed-width renditions would be helpful. – CodeSpent Mar 02 '19 at 16:39
  • 1
    I don't know much about fonts, but I think you might have to use SVG icons to achieve this. – James T Mar 02 '19 at 17:04
  • 2
    All of our icons *should* be fixed width by default. Can you provide a working stack snippet or similar that shows this issue so we can see what's going wrong? – James Coyle Jun 11 '19 at 14:49
  • I have since scrapped this design & moved over to Vue which the iconset fixed-width works perfectly on. I'll see if I can grab a snippet for you to see the issue though. – CodeSpent Jun 12 '19 at 10:49

1 Answers1

0

You can create a class to make that happen. 

.mat-fw {
text-align: center;
width: 1.25em;
}
Shishir Raven
  • 188
  • 11