title: Modify icon size and color of ion-accordion in Ionic 6
body: <p>I'm trying to implement a menu using the new <a href="https://ionicframework.com/docs/api/accordion" rel="nofollow noreferrer">ion-accordion</a> in Ionic 6.</p>
  <p>The documentation says that an <code>ion-icon</code> is automatically added when we use <code>ion-item</code> in the <code>header</code> slot. They have provided a component property to change the icon name or even to use a custom icon (not an <code>ion-icon</code>), but the documentation doesn't mention <strong>how to change the default icon's size and color</strong>.</p>
  <p><a href="https://i.stack.imgur.com/G7Crm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7Crm.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;ion-accordion-group&gt;
   &lt;ion-accordion&gt;
       &lt;ion-item slot=&quot;header&quot;&gt;
           &lt;ion-label&gt;
               Home
           &lt;/ion-label&gt;
       &lt;/ion-item&gt;
   &lt;/ion-accordion&gt;
  &lt;/ion-accordion-group&gt;
  </code></pre>
  <p><strong>I have tried:</strong></p>
  <pre><code>ion-accordion-group {
  
    ion-accordion {
  
      ion-item {
  
        // Attempt 1
        ion-icon {
          // Note. The default icon has this class
          &amp;.ion-accordion-toggle-icon {
            font-size: 128px !important;
            color: red;
          }
        }
  
        // Attempt 2
        ion-icon[slot=&quot;end&quot;] {
          font-size: 128px;
          color: red;
        }
  
      }
  
      // Attempt 3
      ion-item[slot=&quot;header&quot;] {
          ion-icon[slot=&quot;end&quot;] {
            font-size: 128px;
            color: red;
          }
      }
  
    }
  
  }
  </code></pre>
  <p>I would like to change the size and color of the default icon that <code>ion-accordion</code> provides.</p>
  <p>Any help or advice would be appreciated.</p>