How can I hide the gear icon based off permissions?

phil333 

A spfx extension solved my problem!

In my application customizer I imported SPPermission and then used some js to do what I needed.
My Code below:

const canEdit = this.context.pageContext.web.permissions.hasAnyPermissions(SPPermission.manageWeb);
if(!canEdit){
let checkExist = setInterval(function() {
const element = document.querySelector("#O365_MainLink_Settings_container").firstChild.firstChild.firstChild.firstChild;
if(typeof(element) != "undefined" && element != null){
element.parentElement.parentElement.parentElement.remove();
console.log("GFC user only has view rights.");
clearInterval(checkExist);
}
}, 100);
}

References:
Setup Environment: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Build an extension: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension