Properly center non-PrimeIcons inside a InputText Component

[Fluxstone]

Problem

I am unable to center Icons inside a InputText Component from https://pictogrammers.com. I do not have those problems with Icons from PrimeVue. Trying to use an icon per documentation does only work with PrimeIcons

---

An icon used from pictogrammers

Code

<div class="formgrid grid">
  <div class="field col-5">
    <span class="p-input-icon-left w-full">
      <i class="mdi mdi-numeric"/>
      <InputText 
        type="text" 
        v-model="hotelName" 
        class="w-full"
      />
    </span>
  </div>
</div>

---

An icon used from PrimeIcons

Code

<div class="formgrid grid">
  <div class="field col-5">
    <span class="p-input-icon-left w-full">
      <i class="pi pi-home"/>
      <InputText 
        type="text" 
        v-model="hotelName" 
        class="w-full"
      />
    </span>
  </div>
</div>

---

I tried a few different things but couldn't get it to center properly.

Question

How can I properly center the icon from pictogrammers using PrimeFlex?

• Using Vue3 and PrimeFlex
• Theme used in Example is mdc-light-deeppurple

(Sorry if this is a stupid question just getting into proper web development)

[FlipWarthog]

If you can set up a stackblitz showing the icon position issue I can probably come up with a better answer, but the style that's positioning the icon is:

.p-input-icon-left > i,
.p-input-icon-left > svg,
.p-input-icon-right > i,
.p-input-icon-right > svg {
    position: absolute;
    top: 50%;
    margin-top: -.5rem;
}

This looks to be assuming the icon is 1rem x 1rem so if your new icons are slightly different, you'll need to adjust that style in you application to account for the difference.