I think the margins are not the problem here. All our icons are like this. Changing these is not as straightforward as you'd think and carries a lot of risk so let's not do that.

I'm not sure if this is a problem, but we seem to be adding a margin to the settings icon - is this the appropriate positioning?

Removing that gives us the correct positioning (am I right? (if not lemme know and I won't touch that):

Then the next issue is the gray background focus when clicked.

I think we can fix this by making the icon (note the "Disable settings" text added for accessibility)

<a class="mwe-popups-settings-icon" href="/wiki/Special:Preferences#mw-prefsection-rendering">
  <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-popups-settings">Disable settings</div>
</a>

and a bit of flexbox:

.mwe-popups .mwe-popups-container footer .mwe-popups-settings-icon {
    float: right;
    width: 40px;
    height: 40px;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

Does this look like the right effect?:

If so I think I can add some notes to the description and this is ready to go.

@Jdlrobson right, good point that this is happening with all icons (although I think you only notice it on mobile, whereas this is on desktop). Will make a note to follow up about that comprehensively.

In terms of your screenshot above, yes it looks like it's moving in the right direction. The padding is still unequal, and the placement is off, but I think you know that :)

The padding is still unequal, and the placement is off, but I think you know that :)

Not sure I do! Where are you seeing the issue? Is it possible that the settings icon we are using is off? When I look at it is doesn't look centered:
https://github.com/wikimedia/mediawiki-extensions-Popups/blob/master/resources/ext.popups.images/cog.svg
I guess the icon needs to be updated too?

@Jdlrobson ah yea, that seems like part of the issue. I've attached the proper icon from OOUI here.

Also, re: padding and placement, check out the details in the task description.

Padding: equal 7px around icon on all sides
Placement: 27px from right & bottom

Change 435978 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/Popups@master] Update setting icon

https://gerrit.wikimedia.org/r/435978

Change 435978 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Update setting icon

https://gerrit.wikimedia.org/r/435978

@Jdlrobson looks like it needs to come down 2px. Otherwise looking good.

Change 439775 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/Popups@master] Adjusts margin on settings icon

https://gerrit.wikimedia.org/r/439775

Change 439775 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Adjusts margin on settings icon

https://gerrit.wikimedia.org/r/439775

👍 thinking this can skip QA and go straight to sign-off