Unity UI Builder Toggle can't change checkmark size

Questions & Answers
1

I’m probably missing something really obvious, but I can’t figure out how to change the size of the checkmark. I’ve placed a toggle and I can change its size and I can change the font size of the text that the toggle contains, but I can’t seem to find how to change the checkmark size. I can’t find anything online probably because my googling skills are subpar. I’ve lost already 2 h please help. If its possible through the UI inspector or in UXML I would greatly appreciate it.

<ui:VisualElement name="ViewGroupRightsLeft" style="width: 50%;">
                        <ui:Label text="   GROUP RIGHTS:" display-tooltip-when-elided="true" style="font-size: 30px; -unity-font-style: bold; color: rgb(255, 255, 255); width: 100%; -unity-text-align: middle-left; height: 60px; margin-left: 0; padding-left: 20px; white-space: nowrap; margin-top: 40px; align-items: center;" />
                        <ui:Toggle value="false" name="toggleUserMangment" style="font-size: 20px; -unity-font-style: bold; color: rgb(255, 255, 255); -unity-text-align: upper-center; border-left-width: 0; align-items: center; justify-content: center; height: 60px; width: 10%;" />
     </ui:VisualElement>
2

UI Toolkit debugger lets you inspect how any element is structured and guess how it works:

189342-screenshot-2021-11-29-145253.jpg
189342-screenshot-2021-11-29-145253.jpg751×82 18 KB

In this case, checkmark sign in a Toggle element is just a basic VisualElement where the checkmark is a background image. Background images scale with the element according to it’s scale mode.

Knowing that, you need to target most of the elements here to control it’s size. Here is just an example:

#unity-checkmark {
    -unity-background-scale-mode: scale-to-fit;
    width: 100%;
    height: 100%;
}

.unity-toggle__input {
    flex-grow: 1;
    flex-shrink: 0;
}

.unity-toggle__label {
    flex-grow: 1;
    min-width: auto;
}