Use this codes:

<header class=" mdc-top-app-bar material-icons">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item">menu</button><span class="mdc-top-app-bar__title">San Francisco, CA</span> </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</button>
        </section>
    </div>
</header>

And:

const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);

I am creating an app bar with Material Design using their web components. Here is my HTML:

<header class=" mdc-top-app-bar material-icons">
    <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__navigation-icon--unbounded">menu</button><span class="mdc-top-app-bar__title">San Francisco, CA</span> </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item--unbounded" aria-label="Download">file_download</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item--unbounded" aria-label="Print this page">print</button>
            <button class="mdc-icon-button mcw-icons mdc-top-app-bar__action-item--unbounded" aria-label="Bookmark this page">bookmark</button>
        </section>
    </div>
</header>

And my JS file is:

 const topAppBarElement = document.querySelector('.mdc-top-app-bar');
 const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);
 const iconButtonRipples = [].map.call(document.querySelectorAll('.mdc-icon-button'), function(el) {
     return new mdc.ripple.MDCRipple.attachTo(el);
 });
 iconButtonRipples.unbounded = true;

How can I fix this problem?