Vue.js icon css mis-alignment

Question

I'm trying to switch my icons over to iconify based icons and most get swapped without any formatting issues. This calendar one is having an issue and I don't know how to get it aligned. I've tried using some css alignment and margin styling options but the margins just push everything down, and the alignment doesn't change anything. The commented code is the misaligned (iconify) one. Normal V-Icon Image -- Image of Iconify code

<v-row class="my-0 py-0" style="flex-wrap: nowrap;">
                <v-col class="my-0 py-0 mr-0 pr-0 flex-grow-1 flex-shrink-0">
                  <v-icon small class="pr-1 m-icon-button" style="margin-left: -2px">
                    mdi-calendar
                  </v-icon>
                  <!-- <v-icon
                    small
                    class="iconify pr-1 m-icon-button"
                    style="margin-left: -2px"
                    data-icon="mdi:calendar"
                  /> -->
                  <span v-if="actionObj.dateDue" class="m-text-card-small" :style="styleDateDue(actionObj.dateDue)">{{ dateToCalendarString(actionObj.dateDue) }}</span>
                  <span v-else class="m-text-card-small">No Due Date</span>
                </v-col>
                <v-col class="my-0 py-0 mr-0 pr-0 flex-grow-1 flex-shrink-0">
                  <span class="m-text-card-small">{{ actionObj.priority }} Priority</span>
                </v-col>
              </v-row>