Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(top-app-bar): use mdc-icon-button styles instead of top app bar #4745

Merged
merged 20 commits into from
Jun 3, 2019
Merged

feat(top-app-bar): use mdc-icon-button styles instead of top app bar #4745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
28eff3c
chore: add develop to travis.yml (#4659)
Apr 29, 2019
3fd9ee6
feat(chips): Use semantic button elements (#4627)
patrickrodee Apr 30, 2019
88cc637
refactor(dialog): Split dialog Foundation#handleInteraction into #han…
joyzhong May 2, 2019
e1230bc
docs(dialog): Fix foundation comments. (#4672)
joyzhong May 2, 2019
66816a5
feat(menu): add setSelectedIndex to set selected item in menu selecti…
May 6, 2019
240246e
fix(chips): Fix chips trailing icon margin (#4720)
abhiomkar May 15, 2019
3ddbcd4
feat(checkbox): Added mixin to customize checkbox touch dimension. (#…
abhiomkar May 15, 2019
7ac7e6e
feat(dialog): Add Adapter#getInitialFocusEl. (#4719)
joyzhong May 16, 2019
f9172d0
refactor(top-app-bar): Remove [de]registerEventHandler methods from a…
May 17, 2019
ce365e0
feat(chips): Add setAttr adapter method (#4736)
patrickrodee May 20, 2019
6bc62ff
feat(top-app-bar): use mdc-icon-button styles instead of top app bar
May 21, 2019
5f48579
fix: top app bar readme
May 21, 2019
59fc9cb
fix: screenshot
May 21, 2019
36281bf
fix: lint
May 21, 2019
6c045f6
fix(checkbox): screenshot test golden update (#4735)
May 21, 2019
d921653
Merge branch 'develop' into feat/TopAppBar/iconButton
May 22, 2019
b2e6491
Merge branch 'develop' into feat/TopAppBar/iconButton
May 29, 2019
8382c2a
fix: semantics a --> button
May 29, 2019
29e9aa4
fix: screenshor
May 29, 2019
9cb3c27
fix: lint
Jun 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions packages/mdc-top-app-bar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@ npm install @material/top-app-bar
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>
```

> NOTE: Please see note below about `mdc-icon-button` in the [Top App Bar With Action Items](#top-app-bar-with-action-items) section.

#### Menu Icons

We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:
Expand All @@ -67,6 +69,7 @@ However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any

```scss
@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/icon-button/mdc-icon-button";
```

### JavaScript Instantiation
Expand All @@ -85,19 +88,19 @@ const topAppBar = new MDCTopAppBar(topAppBarElement);

### Top App Bar With Action Items

Top app bars can contain action items which are placed on the side opposite the navigation icon.
Top app bars can contain action items which are placed on the side opposite the navigation icon. You must also attach the `mdc-icon-button` class to both the `mdc-top-app-bar__navigation-icon` and the `mdc-top-app-bar__action-item` elements in order to get the correct styles applied. For further documentation on icons, please see the [mdc-icon-button docs](../mdc-icon-button/README.md).

```html
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download">file_download</a>
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page">print</a>
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
</section>
</div>
</header>
Expand All @@ -111,11 +114,11 @@ Short top app bars are top app bars that can collapse to the navigation icon sid
<header class="mdc-top-app-bar mdc-top-app-bar--short">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page">bookmark</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
</section>
</div>
</header>
Expand Down
25 changes: 0 additions & 25 deletions packages/mdc-top-app-bar/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,28 +107,3 @@
}
}
}

// Applies styles to the different types of icons that can exist in top-app-bars.
// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__navigation-icon share all styles except for
// horizontal padding.
@mixin mdc-top-app-bar-icon_() {
@include mdc-ripple-surface;
@include mdc-ripple-radius-unbounded;

display: flex;
position: relative;
flex-shrink: 0;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: $mdc-top-app-bar-icon-size + $mdc-top-app-bar-icon-padding * 2;
height: $mdc-top-app-bar-icon-size + $mdc-top-app-bar-icon-padding * 2;
padding: $mdc-top-app-bar-icon-padding;
border: none;
outline: none;
background-color: transparent;
fill: currentColor;
color: inherit;
text-decoration: none;
cursor: pointer;
}
3 changes: 0 additions & 3 deletions packages/mdc-top-app-bar/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ $mdc-top-app-bar-title-left-padding: 20px !default;
$mdc-top-app-bar-section-vertical-padding: 8px !default;
$mdc-top-app-bar-section-horizontal-padding: 12px !default;

$mdc-top-app-bar-icon-padding: 12px !default;
$mdc-top-app-bar-icon-size: 24px !default;

$mdc-top-app-bar-mobile-breakpoint: 599px !default;

// Default mobile styles
Expand Down
5 changes: 0 additions & 5 deletions packages/mdc-top-app-bar/mdc-top-app-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,6 @@
overflow: hidden;
z-index: 1;
}

&__action-item,
&__navigation-icon {
@include mdc-top-app-bar-icon_;
}
}

@at-root {
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-top-app-bar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@material/animation": "^1.0.0",
"@material/base": "^1.0.0",
"@material/elevation": "^1.1.0",
"@material/icon-button": "^2.1.1",
"@material/ripple": "^2.1.1",
"@material/rtl": "^0.42.0",
"@material/shape": "^1.1.1",
Expand Down
16 changes: 8 additions & 8 deletions test/screenshot/golden.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1776,34 +1776,34 @@
}
},
"spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed-with-action-items.html.windows_ie_11.png"
}
},
"spec/mdc-top-app-bar/classes/baseline-short-collapsed.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-collapsed.html.windows_ie_11.png"
}
},
"spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short-with-action-items.html.windows_ie_11.png"
}
},
"spec/mdc-top-app-bar/classes/baseline-short.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short.html?utm_source=golden_json",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short.html.windows_chrome_74.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/28/17_57_48_326/spec/mdc-top-app-bar/classes/baseline-short.html.windows_firefox_66.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/29/19_08_53_246/spec/mdc-top-app-bar/classes/baseline-short.html.windows_firefox_66.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/14/18_21_02_727/spec/mdc-top-app-bar/classes/baseline-short.html.windows_ie_11.png"
}
},
Expand Down
6 changes: 4 additions & 2 deletions test/screenshot/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@
<title>Dismissible Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand All @@ -46,11 +48,11 @@
<header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar test-drawer-top-app-bar--dismissible">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
7 changes: 4 additions & 3 deletions test/screenshot/spec/mdc-drawer/classes/dismissible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,12 @@
<title>Dismissible Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
<script>
Expand Down Expand Up @@ -99,11 +100,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
6 changes: 4 additions & 2 deletions test/screenshot/spec/mdc-drawer/classes/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@
<title>Modal Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand Down Expand Up @@ -99,11 +101,11 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<header class="mdc-top-app-bar test-top-app-bar test-drawer-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" id="test-drawer-menu-button">menu</button>
<span class="mdc-top-app-bar__title">Modal Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
4 changes: 3 additions & 1 deletion test/screenshot/spec/mdc-drawer/classes/permanent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@
<title>Permanent Drawer - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand Down Expand Up @@ -102,7 +104,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
5 changes: 3 additions & 2 deletions test/screenshot/spec/mdc-drawer/mixins/fill-color-accessible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,13 @@
<head>
<meta charset="utf-8">
<title>fill-color-accessible Drawer Mixin - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.drawer.css">
<link rel="stylesheet" href="../../../out/mdc.icon-button.css">
<link rel="stylesheet" href="../../../out/mdc.list.css">
<link rel="stylesheet" href="../../../out/mdc.top-app-bar.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-drawer/fixture.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
Expand Down Expand Up @@ -102,7 +103,7 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
<span class="mdc-list-item__text"><span class="mdc-top-app-bar__title">Permanent Drawer<i class="test-font--redact-prev-letter"></i></span></span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download" alt="Download">file_download</button>
</section>
</div>
</header>
Expand Down
Loading