Q-Stepper: Allow changing stepper dot icon colour using a custom class

[twistmala]

Hi,

I'm using QStepper component from Quasar and have a question regarding its icon customization. In the documentation for header options, there are properties for inactive-icon/color, done-icon/color, active-icon/color, error-icon/color. These works perfectly when using global icon sets like Bootstrap or Material Icons.

However, my use case requires custom SVG icons. Here's an example of my implementation:

<q-step :name="1" icon="img:/SOME_ICON_FROM_PUBLIC_FOLDER.svg">
    Content
</q-step>

This gets rendered as:

<div class="q-stepper__dot">
    <span>
         <i>
              <img src="/SOME_ICON_FROM_PUBLIC_FOLDER.svg"/>
         </i>
     </span>
</div>

The issue is that there's no way to apply color to the <img> element directly. To handle this, I currently use CSS filters to manipulate the icon color:

.active-mode-icon {
  filter: invert(47%) sepia(80%) saturate(4000%) hue-rotate(5deg) brightness(95%) contrast(105%) !important;
}

.dark-mode-icon {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(343deg) brightness(106%) contrast(102%);
  color: var(--q-primary);
}

.light-mode-icon {
  opacity: 76%;
}

The problem is that with QStepper, there's no available slot or option to assign a custom class or style to the icons inside the q-stepper__dot elements. As a workaround, I'm currently using onMounted to find all .q-stepper__dot .q-icon element and manually apply the desired classes. However, when a step is selected or updated, all the applied classes are removed.

Would it make sense to add a feature for this? For instance:

1. A slot to customize the .q-stepper__dot element directly.
2. Or an option to set custom classes/styles on the icons.

This would make working with custom SVGs much easier, especially when styling or recolouring them,

Thank you in advance for your response.