I'm trying to create a symbol layer with pin-like icons and a label displayed besides the icon as follows. The text should have a variable anchor text-variable-anchor': ['right', 'left'] so that the label moves to the other side of the icon if it's colliding with other symbols.
Now the problem: because the icon is a pin shape, I need the icon anchor to be at the bottom ('icon-anchor': 'bottom'). The text label still positions itself to the original point causing the label to be lower than the icon, like this. When using text-variable-anchor': ['right', 'left'] the 'text-offset' property stops working, therefore it seems impossible to move the label text up while retaining the variable anchor.
I also tried to use text-translate. This works, but then the collision boxes are not updated accordingly which causes labels to collide in to each other. Note that using a 'round' icon wouldn't have this problem. The icon anchor of a round icon would be in the center and therefore the text labels would position perfectly around the label.
Is there a way to use text-variable-anchor and adjust the vertical position of the label text when using an icon with 'icon-anchor': 'bottom'?