ion-icon size fit to svg file inside it

Question

I'm having multiple ion-icons inside divs and spans that is rendering some svg files in assets (with src attribute), I'm trying to make the ion-icon width and height fit the svg file size, but I'm failing, despite this practice seems like a very normal thing.

it seems that having font-size: 2em would make the icon size the exact size from svg file, but the ion-icon width and height is bigger. I found these in the ion-icon's rendered css, causing it to have 28 pixel in my app:

width: 1em;
height: 1em;

also I have found this that is causing the svg to fit the ion-icon size:

.icon-inner, .ionicon, svg {
    display: block;
    height: 100%;
    width: 100%;
}

I've tried changing the ion-icon's height and width to fit-content and every possible thing, all of them result the size to be 0 (except inherit, which makes it much bigger) also object-fit and some other properties, but I guess none of them works because the icon-inner div is inside a shadow-root.

I've also tried overriding the svg's 100% size anywhere in the project with things like this:

svg {
  height: inherit !important;
  width: inherit !important;
}

none seem to have any effect, the svg won't take these anyways and still have the 100% as width and height.

do you have any suggestion on how to override the ionic's svg properties or making ion-icon size fit the svg file size? or maybe I'm missing something really simple here about the practice of having the same size as your svg?

here is my ionic info:

 Ionic CLI                     : 6.20.8
   Ionic Framework               : @ionic/angular
6.5.1
   @angular-devkit/build-angular : 14.2.10
   @angular-devkit/schematics    : 14.2.6
   @angular/cli                  : 14.2.6
   @ionic/angular-toolkit        : 6.1.0