Using Material Design Icons in Menu Drawer | WordPress.org

Resolved zzzz8888
(@zzzz8888)

4 years, 6 months ago
I’ve noticed the material design buttons allow one to add an icon to the button. It would be nice if I could use these icons elsewhere on my site. How does one reference these icons properly?

Unfortunately, my CSS/HTML is a bit weak, but I did try to do some research. I can see the following HTML code associated with an icon I added to a material design button:
```
<a href="/register" class="mdc-button mdc-button--raised is-large mdc-ripple-upgraded" style="--mdc-ripple-fg-size:95px; --mdc-ripple-fg-scale:1.867116220324907; --mdc-ripple-fg-translate-start:36.36669921875px, -21px; --mdc-ripple-fg-translate-end:32.366668701171875px, -22.5px;">
  <i class="material-icons mdc-button__icon">person_add</i>
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Register</span>
</a>
```
I then look in the F12 developer tools scouring the css. I’m not sure how that icon gets displayed. I’m specifically interested in updating my css so that each of my menu drawer items has an icon to the left of each item. How should one accomplish this? Thanks!

Viewing 1 replies (of 1 total)

Utkarsh
(@utkarshpatel)

4 years, 6 months ago
Hello @zzzz8888,

That would be a good feature to add, Currently we do not support it. We are looking into it internally (no promises).

If you look at the component here: https://material.io/components/tabs/web#basic-usage which shows an example of how can you add icons to the tabs.

<span class="mdc-tab__content"> <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span> <span class="mdc-tab__text-label">Register</span> </span>

And with some CSS override to make icon color same as menu item:
```
.site__navigation .tab-bar .mdc-tab .mdc-tab__text-label, .site__navigation .tab-bar .mdc-tab .mdc-tab__icon {
    color: #fff;
    color: var(--mdc-theme-on-header,var(--mdc-theme-on-primary,#fff));
}
```
To answer the other question: We are working on adding a standalone icon to the paragraph and we already added an icon as a block-level element in the latest release. See https://github.com/material-components/material-design-for-wordpress/issues/79

Does that answer your questions?

Cheers!

Viewing 1 replies (of 1 total)

The topic ‘Using Material Design Icons in Menu Drawer’ is closed to new replies.

Tags

icons

1 reply
2 participants
Last reply from: Utkarsh
Last activity: 4 years, 6 months ago
Status: resolved