Button padding modified on icon added to materialize dropdown - css

Question

I am using a materialize dropdown.
Without any icon the button looks ok, however if I add an icon like this:
{/* <!-- Dropdown Trigger --> */}
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>
The padding gets affected and the text goes down, see picture:
What would be the way to solve this? On the other hand is there any way to see or get materialize code into a project to check the code and check what the css classes do, so as to correct small issues like this or extend some?
By the way, I am using react.
Thanks
Edit: What I tried:
<div className="row" style={{alignItems:'center'}}>
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>
</div>

Answer 1

You can try to put the materalize helper valign-wrapper div under the a tag like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<a class='dropdown-trigger btn' href='#!' data-target='dropdown1'>
<div class="valign-wrapper">
Type<i class="large material-icons">arrow_drop_down</i>
</div>
</a>
In your case, the your code should be:
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>
<div className="row" style={{alignItems:'center'}}>
Type<i className="large material-icons">arrow_drop_down</i>
</div>
</a>