Reference element in shadow root - polymer

Question

Say I had this code: (or visit this codepen link)
<script src="https://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/core-scaffold/core-scaffold.html">
<style>
body {
font-family: sans-serif;
}
core-scaffold {
}
core-header-panel {
float: left;
height: 400px;
}
.core-header {
height: 64px;
line-height: 60px;
font-size: 18px;
padding: 0 10px;
background-color: #FF66CC;
color: #FFF;
transition: height 0.2s;
}
.core-header-content {
padding: 20px;
}
.main-menu {
background: transparent;
}
.search {
position: static;
border: 0;
padding: 0;
display: inline-block;
}
.search core-icon {
display: inline-block;
}
.search input {
box-sizing: border-box;
-moz-box-sizing: border-box;
position: static;
display: inline-block;
}
</style>
<core-scaffold responsiveWidth="9999px">
<core-header-panel mode="seamed" navigation flex>
<core-toolbar>
<span flex>Title</span>
<core-icon-button icon="refresh"></core-icon-button>
<core-icon-button icon="add"></core-icon-button>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
<core-toolbar class="main-menu" tool flex>
<span flex>Title</span>
<core-icon-button icon="settings" on-tap="{{settingsAction}}"></core-icon-button>
</core-toolbar>
<div class="core-header-content">
</div>
</core-scaffold>
How would I go about referencing the #menuButton core-icon-button (which is automatically generated by the core-scaffold) to change the attribute value of 'icon' from 'menu' to 'apps'?
It's probably something simple I've overlooked and thanks in advance.

Answer 1

Found the answer:
document.addEventListener('polymer-ready', function(e) {
$('core-scaffold::shadow #drawerPanel #headerPanel core-toolbar #menuButton').attr('icon','apps');
});