badge,html

   <div class="content-title">Badges on Icon</div>
    <div class="badge-collection">
        <div class="badge-container">
            <span class="material-icons-round drawer-icons">
                inbox
                </span>
            <div class="badge topright-badge"></div>            
        </div>
        <div class="badge-container">
            <span class="material-icons-round  drawer-icons">
                settings
                </span>
            <div class="badge badge-sucess topright-badge"></div>            
        </div>
    </div>
    <div class="content-title">Badges on Avatar</div>
    <div class="badge-collection">
        <div class="badge-container">
            <img  class="avatar avatar-xxlg img-round" src="../assets/Img/robert-bagramov-vZWqy-Y5kTI-unsplash.jpg" alt="" srcset="">
            <div class="badge badge-lg badge-warning topright-badge">2</div>
        </div>
        <div class="badge-container">
            <img class="avatar avatar-xlg img-square" src="../assets/Img/pablo-merchan-montes-MXovqM130UI-unsplash.jpg" >
            <div class="badge badge-sucess topleft-badge">2</div>
        </div>
        <div class="badge-container">
            <img class="avatar avatar-xlg img-round" src="../assets/Img/christine-siracusa-vzX2rgUbQXM-unsplash.jpg" >
            <div class="badge"></div>
        </div>
    </div>
    <div class="content-title">Badge on Button and text</div>
    <div class="badge-collection">
        <div class="badge-container">
            <h2>Hello! this is component Libaray</h2>
            <div class="badge badge-lg badge-primary topright-badge">99+</div>
        </div>
        <div class="badge-container">
        <button class="example-button"> Am I a Button ?</button>
            <div class="badge badge-md badge-primary topright-badge">2</div>
        </div>
    </div>