In T296505#7536032, @matmarex wrote:

This is expected. Icons are not all always loaded, they must be loaded by the code that is using them.

To do that, you'd load a ResourceLoader module named oojs-ui.styles.icons-<pack>, where <pack> is chosen from the list at https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons. For example, the 'settings' icon is a part of the 'interactions' pack, so you'd load oojs-ui.styles.icons-interactions. (You can also add the module to dependencies if you're building a gadget.)

Note that you also need to load the ResourceLoader modules for the OOUI code you're using, or just oojs-ui to load them all. When I try your snippet while logged out, I get an error saying that ButtonWidget is undefined.

So, overall, you'll need something like this:

mw.loader.using( [ 'oojs-ui', 'oojs-ui.styles.icons-interactions' ] ).then( function () {
	button = new OO.ui.ButtonWidget( { framed: false, icon: 'settings', label: 'Settings', id: 'test', invisibleLabel: false } );
	$( '.vector-menu-content' ).append(button.$element);
} );

Thank you, I had no idea! This likely also explains an issue I found with https://en.wikipedia.org/wiki/User:Enterprisey/script-installer. (unstyled infobox button on the page of one script)