Changing and Editing .slideout-toggle Icon

I'm trying to change the Desktop Off-canvas Icon to a different one, and then also move it to :after, instead of :before.

Here's what I have so far:

.slideout-toggle:not(.has-svg-icon) a:before {
content: none!important;
}

.slideout-toggle:not(.has-svg-icon) a:after {
content: '';
display: inline-block;
background-repeat: no-repeat;
height: 30px;
width: 30px;
margin: 15px -25px 0 0; <<< this margin is adjusting the entire link not just the carrot icon
background-image: url('../wp-content/uploads/2020/04/carrot-right-icon.svg')!important;
}

I wanted to use a font awesome icon or something built in if I could so I could change the color when hovered over, but when I downloaded font awesome's plugin and used the carrot icon, I got a weird BOX shape icon (which we've all seen before) and I couldn't seem to get the carrot to display. I tried Customize > General > SVG Icons? Idk

So I moved on to using my own SVG icon...

Regardless of the icon's origin, the problem I'm having is my client wants the carrot larger than the text itself but when I go to change the size of the carrot icon I cannot set the margin or line-height or anything else to bring it back inline with the word "explore". For whatever reason when I add a margin to the Pseudo-Element it drags the entire word "Explore" with it, and not just the Carrot Icon.

Any ideas if I'm working with the wrong thing here?

Thanks!