How to change the svg size container of the ion-icon component

@javiersoto1797 wrote:

Hello guys, i am trying to change my ion-icon size, with font-size and it does it correctly, but it is directly proportional to my svg container size.
in other words, it is using more space than just the icon, so it is affecting my label inside my

This is my button with the ion-icon inside.

<ion-tab-button tab="mainview">
      <ion-icon src="assets/logo/mainView.svg"></ion-icon>
      <ion-label>INDICADORES</ion-label>
</ion-tab-button>

This is my current css class for the button

ion-tab-button{
    font-size: 10px;
    --padding-end: 0px;
    --padding-start: 10px;
    --padding-bottom: 0px;
    --margin-left:0px;
    --margin-right:0px;
    --color-selected: var(--ion-color-secondary) !important;
    max-width:100px;
    ion-icon{
        font-size: 67.5px;
    }
}

and this is a screen shot of how the icon and the svg container from the debugger looks like


as you can see, the svg is using way more space than expected

Posts: 1

Participants: 1

Read full topic