How can I add header image to drawer in Google Material Components web?

Question

I'm building a website with Google Material Components for web. I added a drawer to my website and I want to add a header image but I don't know how to do it. Here's the drawer section in Material Design's website:

https://material.io/develop/web/components/drawers/

Answer 1

Until now, there is still no official way on achieving this. The easiest way is to:

first, wrap your header titles (not including the img tag),

<div class="mdc-drawer__header">
    <img id="header-image" src="img.jpg">
    <div id="titles-wrapper">
        <h3 class="mdc-drawer__title">Title</h3>
        <h6 class="mdc-drawer__subtitle">Subtitle</h6>
    </div>
<div>

second, on your CSS file, or on your style tag,

#header-image, #titles-wrapper {
    display: inline-block;
    vertical-align: middle;
}

#header-image {
    width: 32.5%;
}

#titles-wrapper {
    width: 66.5%;
}

Note: It is not necessary to have the image width to be 32.5%, but it is critical to have a 2% allowance on the total width. 30% and 68% would work.