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 =)

html css angular.js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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.

Using CSS Grid Layout in Angular project

This CSS Grid layout tutorial is designed for Angular 7/8 developers that want to learn how to build responsive layouts with modern CSS.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.