Search code examples
htmlcssmaterial-designmaterialize

How to put an icon and p tag aligned on the same line (materializecss)

I am using materialize css along with material icons, trying to put an icon and beside that a few numbers, but I don't know how to. Here is the code:

<i class="material-icons">person</i>
<p>123123</p>

would be awesome if someone could help!

Solution

  • To do this the materialize way, just add a class of left to the icon:

    <i class="material-icons left">person</i>
<p>123123</p>

    The documentation for button sheds some light on this - this is where we traditionally see text and icons side by side in the framework.

    https://materializecss.com/buttons.html

    <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

    @927tanmay's answer is technically correct - the left class just adds float:left to the element - but there's no need to write inline or extra css as the left class is part of the documentation and intended to be used with icons.

    See more on the helpers section.