Weird css with md-badge: square around the number instead of a circle

Weird css with md-badge: square around the number instead of a circle

I'm using md-badge from angularJs to show the number of notifications a user has. But for some reason, css style (from the module) is probably being overwritten. From the documentation, when using "md-bage=number"in a tag, you should see a small circle with the #number inside. In my case, I see a huge number with a square around it, I can't understand why.

I'm using md-badge from angularJs to show the number of notifications a user has. But for some reason, css style (from the module) is probably being overwritten. From the documentation, when using "md-bage=number"in a tag, you should see a small circle with the #number inside. In my case, I see a huge number with a square around it, I can't understand why.

Here is the html code:

<icon
  click-on="vm.clickOnNotifications"
  tooltip=vm.tooltip
  icon="'notifications'"
  md-badge={{vm.notificationsCounter}}
  md-badge-fill="white"
  md-badge-color=":red"
>
</icon>

Here is the html code generated when i inspect the page:

<div class="md-badge" style="position: absolute; color: rgb(244, 67, 54); background-color: white; display: initial; left: 397px; top: 29px;">3</div>

Here is the official documentation and what it should look like: https://jmouriz.github.io/angular-material-badge/demo/demo.html

And here is what I'm seeing: https://imgur.com/a/Dk12qK7

Any idea? What extra info should I send here? Thanks!

Here is my gruntfile code (part of it):

injector: {
      options: {
        ignorePath: 'static/'
      },
      dev: {
        files: {
          'static/index.html': [
            'static/app/app.js',
            'static/app/app.config.js',
            'static/app/**/*Module.js',
            'static/app/**/*Route.js',
            'static/app/**/*Ctrl.js',
            'static/app/**/*Service.js',
            'static/app/**/*Directive.js'
          ]
        }
      },
      production: {
        files: {
          'static/index.html': [
            'static/app/assets/css/**/*.css',
            'static/app/assets/js/*.js'
          ]

    }
  }
},

(obs: this made it work)

I have copied angular-material-badge/angular-material-badge.css file to a folder in assets/css/ so grunt file can put it in my index file. When i run grunt dev, I have my index like:

<!-- injector:css -->
    <link rel="stylesheet" href="/app/assets/css/angular-loading-bar/loading-bar.css">
    <link rel="stylesheet" href="/app/assets/css/angular-material-badge/angular-material-badge.css">
    <link rel="stylesheet" href="/app/assets/css/angular-material-data-table/md-data-table.css">
    <link rel="stylesheet" href="/app/assets/css/angular-material-icons/angular-material-icons.css">
    <link rel="stylesheet" href="/app/assets/css/angular-material/angular-material.css">
    <link rel="stylesheet" href="/app/assets/css/style.css">

Still weird css in the badge.

Solved, thanks John =)

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to CSS Centering for Angular

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners. But with the advent of Flexbox, CSS centering became easier and clearer than ever.