How would i reposition the icon to the left and make the entire button clickable?

[NotSoNitro_Real (NotSoNitro)]

I’m trying to move the icon to the left side of the button to create more space for the text. However, I realized that doing this makes only part of the button clickable since the button itself is essentially the image/icon. Right now, only about half of the button is clickable which isn’t what I want, here’s an example of only some of the button being clickable:

I’ve tried experimenting with different scaleType options, but they don’t seem to solve the issue. I’m also not entirely sure how slice or tile works, so I’m a bit stuck. I even checked if moving the image button to the middle would help, but I couldn’t figure out how to shift the image to the left and also it doesn’t fully cover the button/background.

If anyone has advice or suggestions on how to make the entire button clickable, I’d really appreciate the help! Thanks!

local function handleButtonHover(button, isExpanding)
	local data = buttonData[button]
	if not data then return warn("Data not found") end
	
	local buttonSize = data.Size
	local IconPos = data.IconPos
	local TextPos = data.TextPos
	local absoluteSizeX = button.AbsoluteSize.X
	local textLabel = button:FindFirstChildOfClass("TextLabel")
	local imageButton = button:FindFirstChildOfClass("ImageButton")
	
	local textBounds = game:GetService("TextService"):GetTextSize(textLabel.Text, textLabel.TextSize, textLabel.Font, Vector2.new(buttonSize.X.Offset + 150, math.huge))
	
	local expandSize = UDim2.new(buttonSize.X.Scale, textBounds.X, buttonSize.Y.Scale, buttonSize.Y.Offset)
	local edgeDetermainRight = absoluteSizeX + expandSize.X.Offset
	local edgeDetermainLeft = absoluteSizeX / 2
	local repositionIcon = UDim2.new(0, edgeDetermainLeft + 2, .5, 0)
	local systemmsg = false

	if isExpanding then
		button.UIStroke.UIGradient.stroke.Enabled = true
		Tween(button.UIStroke, 0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Transparency = 0})
		Tween(button, 0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Size = expandSize})
		Tween(imageButton, 0.06, Enum.EasingStyle.Sine, Enum.EasingDirection.In, {Position = repositionIcon})
		--Tween(textLabel, 0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Position = expandTextPos, TextTransparency = 0})  -- Not Implamented yet
	else
		button.UIStroke.UIGradient.stroke.Enabled = false
		Tween(button.UIStroke, 0.1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Transparency = 1})
		Tween(button, 0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Size = buttonSize})
		Tween(imageButton, 0.06, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Position = IconPos})
		--Tween(textLabel, 0.1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, {Position = TextPos, TextTransparency = 1})  -- Not Implamented yet
	end
end

[EtNowis]

only a Button (eg Image Button) have the effective hit area.
so make sure you structure your button as

ImageButton
  L ImageLabel (icon)
  L TextLabel (text)

(well done on the look of button and animation)

[NotSoNitro_Real (NotSoNitro)]

Ok that makes it easier thanks for the tip, actually makes my life a lot easier lmao

Also thank you for the compliment, seen a few HUD’s I liked and based it off them