Ionic class

Ionic Framework
1

I have a question
How do I have e.g.

And I have a few such buttons in, for example in “ion-row”
Can I give a class and assign outline or success there?
Do I have to write this every time on every button in this row?

2

Your question is pretty vague - How do I ask a good question? - Help Center - Stack Overflow

But with the limited information you provided, you could abstract it to a Vue/Angular/React (whatever framework you are using) component.

3

I use Angular.
For example if i have this:

<ion-list class="menuTest"> 
    <ion-item lines="full" detail>
     <ion-icon size="large"  slot="start" ios="document-text-outline" md="heart-sharp"></ion-icon>
      <ion-label>Test</ion-label>
    </ion-item>
    <ion-item lines="full" detail>
     <ion-icon size="large"  slot="start" ios="qr-code-outline" md="heart-sharp"></ion-icon>
      <ion-label>Test2</ion-label>
    </ion-item>
    <ion-item lines="full" detail>
     <ion-icon size="large"  slot="start" ios="phone-portrait-outline" md="heart-sharp"></ion-icon>
      <ion-label>Test3</ion-label>
    </ion-item>
  </ion-list>

Do I have to enter size=large in each ion-icon?
I can’t do it somehow like this:
In variables.scss e.g.

.menuTest ion-icon{
  size=large;
}
4

No, you cannot do that. But, Ionic icons use CSS font-size to configure the size.

So, you could do this:

<style>
ion-icon {
  font-size: 2rem; /* This is equivalent to "large" */
}
</style>
5

what about others, such as “slot” or other attributes?

Do you know if there is somewhere in the code/documentation what a given value does in CSS so that it can be assigned to a group?

6

Not easily. You could probably do it with JS. There is not documentation on what a given value does with CSS other than source diving or using DevTools.

Why don’t you just extract it to an Angular component as a wrapper around IonItem?