[Ionic 4] How to apply text-wrap on Ion-title and incrase the icon size on ion-tabs?

Ionic Framework
1

I am using ionic 4 and I am facing some issues:

  1. My ion-header > ion-title is too long then, I need to do text-wrap for two line header.
  2. I am trying to change icon size but I could not change it because of, shadow-root

Please give me the solution if any.

2

You have to modify in your css the “hidden” properties of the button component, for example

ion-button {
   --height : 12px;
}

You can access to all the css properties described in the Submit an edit on GitHub! link below…
Not really obvious…I think the Ionic team should rename this link !

3

It will increase the element height. Using the --height properties but I need to change ion-tabs icon sizes as well as text-wrap in two lines for the header as per the image attached.

Ion-tabs Icon
Capture1

Header Title text need to wrap in two lines

Capture
Capture.jpg369×576 11.6 KB

4

From what I understand of shadow-dom, you just have access to the properties listed in the link I posted…
You didn’t find what you need ?

5

is any workaround to achieve this?

6

I am also facing same issue. Any update on this?

7

+1 I dont understand why the new ion-tabs have those problems.